微信小程序下拉刷新

目前看到有两种实现小程序下拉刷新的方法

  1. 使用系统提供的 onPullDownRefresh
  2. 使用 scroll-view 组件实现下拉刷新

# 使用 onPullDownRefresh 实现下拉刷新

主要是通过在 .json 里面进行配置实现下拉刷新,而且不光可以用在当前页面,也可以用在全局 json 配置文件中。

如果在全局 app.json 的 windows 配置下开启就会开启全局下拉刷新(默认情况是关闭的),小程序内的所有页面都会开启下拉刷新。

{
  "pages": [..],
  "window": {
    "enablePullDownRefresh": true
  },
}

一般来说不会全局打开这个配置,因为大部分页面应该并不需要下拉刷新,比如设置相关的页面。所以全局的下拉刷新是关闭的,如果我们想要在某个页面单独配置下拉刷新的话,可以再这个页面的 json 中单独进行配置。如果全局的下拉刷新配置和页面下拉刷新配置冲突的话,以页面的下拉刷新配置为准。

下拉刷新会触发页面中的 onPullDownRefresh 方法,这个方法如果我们是创建 Pages 页面的话,IDE 会自动生成这个方法,我们只需要在里面实现自己的业务逻辑就好了。如果自己也实现的话两个方法会冲突,导致执行异常,所以这儿需要注意一下。

总的使用步骤如下

  1. 在当前页面中开启下拉刷新

  2. 在页面中实现 onPullDownRefresh 方法,实现自己的下拉刷新业务逻辑

  3. 在下拉刷新业务逻辑结束之后停止下拉刷新。代码逻辑大致如下

    // 页面相关事件处理函数--监听用户下拉动作
    onPullDownRefresh: function () {
      try {
        await doNetRequest()
      } catch (error) {
        console.log(error)
      } finally {
        wx.stopPullDownRefresh() 
      }
    }
    

Note

  1. 如果想要手动触发下拉刷新,可以使用 wx.startPullDownRefresh (opens new window) 这个 API。

# 使用 scroll-view 组件实现下拉刷新

直接上代码,然后解释组件对应的属性的作用

//index.xml
<scroll-view class="scroll-style" bindrefresherrefresh="handleRefresh" refresher-enabled="true" refresher-triggered="{{requestFlag}}" refresher-threshold="{{50}}" scroll-y="{{true}}">
  <view class="container">
    ...
  </view>
</scroll-view>
//index.less
.scroll-style {
  height: calc(~"100vh - 108rpx - env(safe-area-inset-bottom)");
  box-sizing: border-box;
  background-color: #F8F8F8;

}
//index.ts
async handleRefresh() {
  await this.doNetworkRequest()
  this.setData({
    requestFlag:false
  })
},

Note

  1. bindrefresherrefresh: 自定义下拉刷新触发的方法,这个 API 名字起的有点怪(但确实是两个 refresh … ),我们在对应的触发方法里面实现下拉刷新逻辑。

  2. refresher-enabled: 开启自定义下拉刷新

  3. refresher-triggered: 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发。一般都是在方法里进行变量控制的,如图在刷新完毕之后将改变量改为 false,恢复视图原状。

  4. refresher-threshold 这个是下拉刷新高度阈值。但是改了之后不生效,不知道为啥… 看官方论坛似乎是个 bug.

  5. scroll-y 允许纵向滚动。

  6. 关于 CSS 中指定的语句的说明

    height: calc(~"100vh - 108rpx - env(safe-area-inset-bottom)");
    

    env():一个用于获取环境变量的 CSS 函数。在这个例子中,它用于获取底部安全区域的高度。

    用 100vh(视口高度,这里表示 100% 视窗高度)减去 108rpx(我们实际例子有个底部的 tabbar)再减去安全区域高度,就是 scroll-view 高度。

    关于 「~」 这个符号,因为我们用的是 .less 文件,less 中波浪号表示转义符,将字符串转化为值。

    Escaping allows you to use any random string as a property value or variable value.

以上,感觉 onPullDownRefresh 这种方式似乎更简单,但是我在实际中使用的时候会遇到某些安卓真机下拉刷新的时候 tabbar 跟着一起被划走了,效果有点奇怪。scroll-view 实现没有奇怪的问题,而且定制化内容更多一些。

参考地址:

  1. scroll-view 组件文档 (opens new window)
  2. onPullDownRefresh API 说明 (opens new window)
  3. Tilde in CSS attribute value (opens new window)
  4. Less Escaping 说明 (opens new window)

关注我的微信公众号,我在上面会分享我的日常所思所想。