微信小程序下拉刷新

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

  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)

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

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