IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 小程序下拉刷新ios回弹问题-onPullDownRefresh -> 正文阅读

[移动开发]小程序下拉刷新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())
    })
  },
  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-04-13 23:35:31  更:2022-04-13 23:38:56 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 20:33:57-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码