微信小程序上拉触底事件

一、什么是上拉触底事件

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

二、监听上拉触底事件

在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件。

三、配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。

可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。

小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。

四、微信小程序上拉触底案例

1. 页面效果

2. 实现步骤

  1. 定义获取随机颜色的方法
  2. 在页面加载时初始化数据
  3. 渲染UI结构并且美化页面效果
  4. 在上拉触底时调用获取随机颜色的方法
  5. 添加loading提示效果
  6. 对上拉触底进行节流处理

3. 具体实现

  1. 定义获取随机颜色的方法

    getColors() {
    wx.request({
    url: 'https://applet-base-api-t.itheima.net/api/color',
    method: 'GET',
    success: ( {data:res})=>{
    // console.log(res.data);
    this.setData({
    colorList: this.data.colorList.concat(res.data)
    })
    console.log(this.data.colorList);

    复制代码
       },
     });

    },

  2. 在页面加载时初始化数据

    onLoad(options) {
    this.getColors();
    },

  3. 渲染UI结构并且美化页面效果

    <view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

    /* pages/connect/connect.wxss */
    .num-item {
    border: 1rpx solid #efefef;
    border-radius: 8rpx;
    line-height: 200rpx;
    margin: 15rpx;
    text-align: center;
    text-shadow: 0rpx 0rpx 5rpx #fff;
    box-shadow: 1rpx 1rpx 6rpx #aaa;
    }

  4. 在上拉触底时调用获取随机颜色的方法

    onReachBottom() {
    this.getColors();
    },

  5. 添加loading提示效果
    在调用getColors( )函数的内部,发送请求之前展示loading效果,发送请求获取数据之后隐藏loading效果。

    getColors() {
    // 需要展示loading效果
    wx.showLoading({
    title: '正在加载中...',
    }); // 展示loading效果
    wx.request({
    url: 'https://applet-base-api-t.itheima.net/api/color',
    method: 'GET',
    success: ( {data:res})=>{
    console.log(res.data);
    this.setData({
    colorList: this.data.colorList.concat(res.data)
    })
    console.log(this.data.colorList);

    复制代码
       },
       complete: ()=>{
         wx.hideLoading();
       }
     });

    },

  6. 对上拉触底进行节流处理

  • 在data中定义isLoading节流阀:true 正在进行数据请求,false 当前没有进行任何数据请求

  • 在getColor()方法中修改isLoading节流阀的值:刚调用 设置为 true,在网络请求的complete中 重置为 false

  • 在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制:true 阻止当前请求,false 可以发起数据请求

    data: {
    colorList: [],
    isLoading: false
    },
    getColors() {
    this.setData({
    isLoading: true
    });
    // 需要展示loading效果
    wx.showLoading({
    title: '正在加载中...',
    }); // 展示loading效果
    wx.request({
    url: 'https://applet-base-api-t.itheima.net/api/color',
    method: 'GET',
    success: ( {data:res})=>{
    console.log(res.data);
    this.setData({
    colorList: this.data.colorList.concat(res.data)
    })
    console.log(this.data.colorList);

    复制代码
        },
        complete: ()=>{
          wx.hideLoading();
          this.setData({
            isLoading: false
          })
        }
      });
    
    },

    onReachBottom() {
    if (this.data.isLoading===true) {
    return;
    }
    this.getColors();
    },

4. 完整.js文件代码

复制代码
// pages/connect/connect.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    colorList: [],
    isLoading: false
  },
  getColors() {
    this.setData({
      isLoading: true
    });
    // 需要展示loading效果
    wx.showLoading({
      title: '正在加载中...',
    }); // 展示loading效果
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method: 'GET',
      success: ( {data:res})=>{
        console.log(res.data);
        this.setData({
          colorList: this.data.colorList.concat(res.data)
        })
        console.log(this.data.colorList);
       
      },
      complete: ()=>{
        wx.hideLoading();
        this.setData({
          isLoading: false
        })
      }
    });

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   this.getColors();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.isLoading===true) {
      return;
    }
    this.getColors();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
相关推荐
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域4 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷4 小时前
第一个小程序
小程序
春哥的研究所4 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld4 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点6 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖10 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发11 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°13 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero13 小时前
微信小程序91~100
微信小程序·小程序