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

有的时候由于样式的问题，会涉及到兼容，有的时候没有。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()的效果是标题栏的加载的圆圈，如下图。

2. 在IOS上有时候不会停止刷新，所以调用stop下拉刷新，以及隐藏起来刚刚的那个loading.这几个API的语义已经十分明显。

至此，完成。

标题栏的加载的圆圈

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