我们在进行微信小程序的开发时,经常遇到需要上拉刷新数据的需求。可能大家都不经意间看到过,当新建一个页面的时候,原始JS文件中的生命周期函数里就有实现这个需求的函数。
微信小程序如何实现下拉刷新_js
但是如果直接在里面写代码的话,根本无法触发这个函数。我当时也很懵逼,但是看过微信小程序开发文档后,我们发现,需要在页面的json文件中配置一下属性enablePullDownRefresh的值为true
微信小程序如何实现下拉刷新_小程序_02
还有很关键的一点是,如果用onPullDownRefresh这个生命周期函数的话,就必须要写wx.stopPullDownRefresh来关掉它,不然它会一直处于下拉的状态。

  onPullDownRefresh: function () {
    wx.showToast({
      title: '下拉加载',
    })
    wx.stopPullDownRefresh({
      success: (res) => {
        
      },
    })
  },

我们来测试一下代码的效果
微信小程序如何实现下拉刷新_js_03
这个操作还是很实用的,大部分情况下,我们都是在onLoad请求并处理数据的,所以可以在监听下拉的这个函数里重新调用一次onLoad函数,以此来重新请求一遍数据,达到刷新页面的作用。

 


微信小程序如何实现下拉刷新_微信小程序_04