微信小程序 关于下拉刷新的实现

微信小程序——关于下拉刷新

近期在做一个微信小程序的开发项目。其中一个需求就是，下拉刷新。这个功能可以应用于许多场景，譬如，当执行下拉刷新时，页面可以重新加载，数据重新更新。
在上传头像，修改资料，或者类似朋友圈发动态之后，都可以通过下拉刷新，来更新数据。下面，我们看看如何实现吧！

第一步：配置json文件

设置 enablePullDownRefresh 为 true

{
  "usingComponents": {},
  "enablePullDownRefresh": true ,
  "backgroundTextStyle": "dark", 
  "navigationBarBackgroundColor":"#F2F2F2",
  "navigationBarTitleText":"我的",
  "navigationBarTextStyle":"black",
  "backgroundColor":"#98D8DD"
}

第二步：写js中的onPullDownRefresh函数

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    var that = this;
    that.setData({
      currentTab: 0 //当前页的一些初始数据，视业务需求而定
    })
    this.onLoad(); //重新加载onLoad()
  },

第三步：写js中的onLoad函数

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.stopPullDownRefresh() //刷新完成后停止下拉刷新动效
    console.log('finish PullDownRefresh') 
    // 测试是否重新执行onLoad函数 
    this.setData({
      userInfo: getApp().globalData.userInfo
    })
  },

第四步：效果体验

执行下拉动作时，可以出现三个点，表示等待释放。

Console中可以看到，输出了两次 finish PullDownRefresh。第一次是编译后，第一次进入这个页面。第二次是，下拉完成后输出的。也就是说，当“下拉”这个动作执行完，重新执行了 onLoad 函数，页面重新加载了。 也可以根据需要，重新加载数据等。