html js微信朋友圈下拉刷新效果,微信小程序下拉刷新：onPullDownRefresh正确使用姿势...

需要写一个小程序下拉刷新效果，本以为应该很简单的东西，没想到微信在这个地方有点小坑😜，废话不多，直接上步骤，手把手教大家怎么用。

1、需要在.json文件里设置 "enablePullDownRefresh": true,用于开启页面下拉加载效果，可以当前页设置也可以全局设置；

{

"enablePullDownRefresh": true //当前页

"backgroundTextStyle": "dark" //顶部显示颜色为深色的三个点

}

or

"window": {

"enablePullDownRefresh": true //全局

"backgroundTextStyle": "dark" //顶部显示颜色为白色的三个点

}

2、注意在开发工具中模拟下拉动作时mac触摸板需要点击同时下拉才能模拟下拉动作，直接双指下拉不行；

3、第一设置好后用onPullDownRefresh()函数监听下拉动作，注意页面可能已经有默认的onPullDownRefresh()函数存在，需要去重；

/**

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

*/

onPullDownRefresh: function () {

}

4、重置页面初始数据+调用onLoad()函数制作重新加载效果；

onPullDownRefresh: function () {

var that = this;

that.setData({

currentTab: 0 //当前页的一些初始数据，视业务需求而定

})

this.onLoad(); //重新加载onLoad()

},

5、此时下拉刷新已经ok，但是还可以再优化下：onLoad()函数开头时设置wx.stopPullDownRefresh()停止下拉刷新效果，这样刷新完后就不会继续显示那三个点了~(￣▽￣)~。

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

wx.stopPullDownRefresh() //刷新完成后停止下拉刷新动效

//后面的业务代码大家自行发挥

},