小程序下拉刷新ios回弹问题-onPullDownRefresh

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

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

小程序下拉刷新ios回弹问题-onPullDownRefresh相关推荐

微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
小程序下拉刷新上拉加载等多
小程序下拉刷新上拉加载下拉刷新在当前页面的json文件中开启上拉刷新 async getGoodsList(){ //定义参数信息var n=this.data.infoconst res=aw ...
小程序下拉刷新的实现
小程序下拉刷新 1.使用onPullDownRefresh()这个方法来实现下拉刷新例子如下: // 页面下拉刷新 onPullDownRefresh() { this.loadSwiper();/ ...
微信小程序下拉刷新问题
微信小程序下拉刷新问题我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
小程序下拉刷新，恢复页面原样
小程序下拉刷新,恢复页面原样下拉刷新走的是下面的方法 onPullDownRefresh: function() {} 在刷新并请求数据之后,需要手动结束下拉刷新的状态,才能恢复列表的原样.不然,下 ...
微信小程序下拉刷新真机没效果_微信小程序下拉刷新上拉加载(示例代码)
1.下拉刷新小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新.如 ...
ios微信小程序下拉刷新怎么配_[wx]微信小程序自定义下拉刷新
需求: 在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面操作与交互性: 实现方法: 1.小程序提供的下拉刷新(无法自定义刷新动画) 在页面设置内开启下拉(单独页面设置): { ...
ios微信小程序下拉刷新怎么配_为什么他的下拉刷新是个动画效果？
看到别人的下拉刷新动画!是不是蠢蠢欲动!也想马上拥有一个~~ 比如: 再比如: "小二,上菜!" 1 引入下拉刷新组件(组件代码可联系作者获取) 代码: ...

小程序下拉刷新ios回弹问题-onPullDownRefresh

小程序下拉刷新ios回弹问题-onPullDownRefresh相关推荐

最新文章

热门文章