微信小程序 下拉刷新实现以及兼容

有的时候由于样式的问题,会涉及到兼容,有的时候没有。onPullDownRefresh事件,无法在scroll-view中触发

那么什么时候会出现呢?

情况1:IOS机上,即使写上

page{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

下拉刷新依然是不影响的。

但是安卓机上就不可以。就无法实现下拉刷新的效果了。但是只要去掉page的这段代码,就可以实现下拉刷新。

正常的下拉刷新效果实现:

step1 给json文件添加
{
  "enablePullDownRefresh":true,
  "backgroundTextStyle": "dark"
}

说明:

  1. 可以给单个页面的json文件添加,也可以给app.json添加,不同的就是作用的页面范围不同而已。
  2. 用dark是因为背景色是白色,所以才能看到那三个点。否则如果使用light,那么就会导致看不见...了。
step2 在该页面的js文件中添加事件处理函数
onPullDownRefresh: function () {
    wx.showNavigationBarLoading()
    this.onLoad()
    setTimeout(() => {
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    }, 2000);
  },

代码说明:

  1. wx.showNavigationBarLoading()的效果是标题栏的加载的圆圈,如下图。
  1. 在IOS上有时候不会停止刷新,所以调用stop下拉刷新,以及隐藏起来刚刚的那个loading.这几个API的语义已经十分明显。

至此,完成。

标题栏的加载的圆圈

本文遵守知识共享协议:署名-非商业性使用-相同方式共享 (BY-NC-SA)简书协议

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,247评论 3 119
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 15,994评论 4 61
  • —卷首语— 俗话说,巧妇难为无米之炊,对于爱好写作的人,素材便是锅中的米,方法便是手下的炊。 很多时候不是不想写,...
    简书专题周刊阅读 1,187评论 3 26
  • 第一次来简书,还请各位老友看官海涵。先拿英雄联盟来说吧,我觉得门槛很高,玩的菜的真的菜如狗,我曾经花了很多心思去玩...
    在锅里煮的鸡阅读 225评论 0 0
  • 夜晚是适宜思考的 虽然,我从未得出答案 无人知晓的是我 开出心事如昙 你是过早经过的月色 灯光下的人们无从得知 一...
    晚树阅读 646评论 15 29

友情链接更多精彩内容