小程序 下拉刷新 上拉触底加载数据

1. 下拉刷新

下拉刷新主要用到「onPullDownRefresh」函数，我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数，其中就会生成「onPullDownRefresh」函数，所以没注意的同学会发现我写了「onPullDownRefresh」函数，但是没起作用的情况

当然我们最先要做的是开启此功能，在「app.json」文件「window」对象中加入

"enablePullDownRefresh": true

或者在页面对应的JSON文件中加入这个配置，例如我「list」目录下wxml对应的JSON文件就是「list.json」或者「index,json」

可以通过「wx.startPullDownRefresh」触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一样

当处理完数据刷新后，「wx.stopPullDownRefresh」可以停止当前页面的刷新

最后使用方法如下：

getData: function() {
    
    wx.cloud.callFunction({
      name: '',
      data: {
        type: 'get'
      },
      success: function(res) {
        .......

        // 停止下拉动作
        wx.stopPullDownRefresh();
      },
      fail: function() {
        
      }
    })

}

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
  onPullDownRefresh: function () {
    this.getData(); // 这里写自己要调用的查询方法
  },

PS: 如果大家看不到动画，在「app.json」「window」对象中添加如下：

"backgroundTextStyle": "dark"

2. 上拉触底-加载更多数据

上拉触底用到「onReachBottom」函数，直接上代码：

/**
 * 上拉触底
 */
onReachBottom: function () {
    this.setData({
      curPage: this.data.curPage+1 // 一般上拉触底是为了加载更多分页数据，所以这里页数自增
    });
    this.getGoodsList(this.data.activeCategoryId, true) // 查询方法
  },

可以在「app.json」中的「window」对象下设置触发距离：

"onReachBottomDistance":50

在触发距离内滑动期间，本事件只会触发一次

 

好了，到这里分享就结束了，大家如果觉得有帮助的话就随便赞赏一下，这是对我最大的鼓励，谢谢?。