一.上拉加载
微信小程序的上拉加载使用onReachBottom(),写在.js文件里面的Page方法里面。
onReachBottom(){//上拉自动更新到4,5,6wx.showLoading({title: '数据加载中...',})setTimeout(()=>{const lastNum=this.data.numList[this.data.numList.length-1]const newAry=[lastNum+1,lastNum+2,lastNum+3]this.setData({numList:[...this.data.numList,...newAry]})wx.hideLoading()},1500)}
onReachBottom()会监听微信小程序上拉操作。
需要在.json文件里面配置"onReachBottomDistance"属性。
如下面的代码,在距离底部50px的时候会触发到onReachBottom()
"onReachBottomDistance": 50px
二.下拉刷新
下拉刷新使用onPullDownRefresh()
onPullDownRefresh(){//下拉刷新后,显示1,2,3this.setData({numList:[1,2,3]})if(this.data.numList.length === 3){wx.stopPullDownRefresh()}}
注意,在使用onPullDownRefresh() 的时候,需要及时使用wx.stopPullDownRefresh()进行关闭,不然可能会长时间显示刷新状态