记录一个小程序的踩坑实录。
事情是这样的,业务上需要加一个下拉刷新的功能,我看了我们项目中之前有人做过,直接第一步,cv一下我就也加上去了。加上去后感觉也没什么调一调api的事情。
onPullDownRefresh: function () {
this.setData({
pageNum: 1,
theEnd:false
}, () => {
this.getList()
})
},
谁知……到测试的时候我们测试跟我说这边有问题,说这里ios上出现了回弹较慢的情况。我纳闷了,明明是一样的东西怎么会特别有问题呢? 我认真的去看了onPullDownRefresh的api:
onPullDownRefresh() 监听用户下拉刷新事件。
需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
一开始以为是滚动条的问题,我就写了代码让滚动条滚到0的位置。
onPullDownRefresh: function () {
this.toTop();
this.setData({
pageNum: 1,
theEnd:false
}, () => {
this.getList()
})
},
还是有问题,在认真看了回弹效果后,确认了这不是滚动条的事情,以为下拉块是在page之外的灰块,它这里的回弹会比较慢,有时候甚至不回弹。但是问题来了,之前他们怎么不会出现这种情况?在经过一系列操作后,问了其他同事才终于发现在老代码的其他地方有几句没有注释的,并且我页看不懂的,并且我一直不在意的代码……
if (refresh) {
this.interval = setTimeout(() => {
wx.stopPullDownRefresh()
this.setData({
refresh: false
})
}, 200)
}
之前一直以为是什么特殊的判断,也没注释,对它用的api也没在意。(讲实话代码写的不咋地所以没啥兴趣去研究)
最后看了api说明后,我就只能拍脑门了。。。。
wx.stopPullDownRefresh(Object object) 停止当前页面下拉刷新
好吧,到了这里大概就清除情况了,因为一些兼容问题,在ios上通过 wx.onPullDownRefresh 下拉后的部分尔尔会出现无法恢复下拉前的状态。这里只要等我们的下拉请求完后通过wx.stopPullDownRefresh() 让页面恢复原状就好了。
最后上一下代码:
onPullDownRefresh: function () {
this.setData({
pageNum: 1,
theEnd:false
}, () => {
this.getList().then(res=>wx.stopPullDownRefresh())
})
},
|