须要写一个小程序下拉刷新效果,本觉得应该很简单的东西,没想到微信在这个地方有点小坑😜,废话很少,直接上步骤,手把手教你们怎么用。json
一、须要在.json文件里设置 "enablePullDownRefresh": true,用于开启页面下拉加载效果,能够当前页设置也能够全局设置;小程序
{ "enablePullDownRefresh": true //当前页 "backgroundTextStyle": "dark" //顶部显示颜色为深色的三个点 }
or微信
"window": { "enablePullDownRefresh": true //全局 "backgroundTextStyle": "dark" //顶部显示颜色为白色的三个点 }
二、注意在开发工具中模拟下拉动做时mac触摸板须要点击同时下拉才能模拟下拉动做,直接双指下拉不行;函数
三、第一设置好后用onPullDownRefresh()函数监听下拉动做,注意页面可能已经有默认的onPullDownRefresh()函数存在,须要去重;工具
/** * 页面相关事件处理函数--监听用户下拉动做 */ onPullDownRefresh: function () { }
四、重置页面初始数据+调用onLoad()函数制做从新加载效果;开发工具
onPullDownRefresh: function () { var that = this; that.setData({ currentTab: 0 //当前页的一些初始数据,视业务需求而定 }) this.onLoad(); //从新加载onLoad() },
五、此时下拉刷新已经ok,可是还能够再优化下:onLoad()函数开头时设置wx.stopPullDownRefresh()中止下拉刷新效果,这样刷新完后就不会继续显示那三个点了~( ̄▽ ̄)~。优化
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.stopPullDownRefresh() //刷新完成后中止下拉刷新动效 //后面的业务代码你们自行发挥 },