记录一个小程序的踩坑实录。

事情是这样的,业务上需要加一个下拉刷新的功能,我看了我们项目中之前有人做过,直接第一步,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())
    })
  },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐