​借助云开发数据库实现小程序列表上拉刷新功能丨云开发101

上一期101专栏中，我们介绍了如何借助云开发数据库实现小程序的列表触底自动加载功能，相对应的，小程序列表上拉刷新又该如何实现呢？本期专栏就来为大家解答。

原理说明

在小程序中，如果我们希望实现上拉刷新的功能，则需要我们监听小程序页面的 onPullDownRefresh 事件，我们可以在这个方法中实现数据的加载和替换，从而实现数据的刷新和页面的更新。

实现代码

正常情况下的上拉刷新
首先，我们先来看一看一般情况下的上拉刷新功能的实现。这里的「一般情况」是指你没有使用 scroll-view 组件的场景，或者使用的是横向的 scroll-view 的场景，列表是直接构建在页面内部的，而不是构建在 scroll-view 内部的。

在这种情况下，我们如果希望在页面上实现上拉刷新，需要在 app.json 中的 window 选项中，或者是页面的配置中加入 enablePullDownRefresh，并将其配置为 true。

// app.json
{
   ...
   "window":{
       "enablePullDownRefresh":true
    }
    ...
}
// page.json
{
   "enablePullDownRefresh":true
}

配置好以后，我们就可以开始配置了。进入到我们需要实现下拉刷新的页面，在这个页面中，我们需要在 Page 的构造函数中添加 onPullDownRefresh 函数的监听。

Page({
  onPullDownRefresh:function(){
      // 这里我们需要进行页面的加载。
    }
})

我们需要在 onPullDownRefresh 函数中，加入我们查询数据的代码，从而实现数据的更新和替换，大体上写好的代码如下：

Page({
  onPullDownRefresh:function(){
      let db = wx.cloud.database();
    // 查询数据
    db.collection('records').get().then(res => {
      // 更新数据
      this.setData({
                data: res.data
      },()=>{
                wx.stopPullDownRefresh();  // 数据同步完成后，停止掉上拉刷新的动画效果。
      })
    }).catch(err => {
      console.error(err)
    })
  }
})

在上面这段代码中，我们在 onPullDownRefresh 方法中加入了 云开发的数据库查询方法，并在数据库查询方法的成功回调中加入了 setData 的方法来更新数据，从而确保我们的小程序的页面数据可以完成更新。

在 setData 方法的回调中，我加入了对 wx.stopPullDownRefresh 的调用，这个 API 可以停止掉小程序的 PullDownRefresh 的动效，从而避免掉数据更新完成了，但是页面还处在下拉加载的状态。

这样，我们就足以处理绝大多数场景下的上拉刷新的情况了。

特殊情况下的上拉刷新

除了直接在页面上使用上拉刷新的 API 以外，还会有另外一种场景，就是我们会将页面顶部固定，下方的部分滚动，比如腾讯视频的视频播放页面。这个页面是在上方放置一个 Video Player，下方放置一个 scroll-view 来完成滑动，从而实现顶部的 Video Player 固定的效果。在这种情况下，我们应该如何实现上拉刷新呢？

其实也很简单，我们只需要利用 scroll-view 组件的 bindscrolltoupper 事件来完成上拉刷新的功能。

在具体实现的时候，我们需要在 scroll-view 组件中加入对应的配置。

<scroll-view upper-threshold="50" bindscrolltoupper="onTopper">
<!--- 具体的内容 -->
</scroll-view>

然后，在对应的页面中，加入具体的事件触发，参考代码如下：

Page({  
     onTopper:function(){
          wx.startPullDownRefresh();
          let db = wx.cloud.database();
           db.collection('records').get().then(res => {
      // 更新数据
      this.setData({
                data: res.data
      },()=>{
                wx.stopPullDownRefresh(); // 数据同步完成后，停止掉上拉刷新的动画效果。
      })
    }).catch(err => {
      console.error(err)
    })
  }
})

这样，我们就可以实现在 ScrollView 内部实现了一个上拉触底的效果。

在这段代码中，因为我们没有直接触发页面的上拉效果，所以这里我们使用 wx.startPullDownRefresh 来触发页面的上拉效果，然后再使用云开发的 API 来完成数据的加载，加载完成后，调用 wx.stopPullDownRefresh 方法，停掉上拉刷新的动画效果。

这样，即使我们没有直接触发页面的事件，但可以达到类似的页面效果。

总结

上拉刷新是一个我们很常用的功能，在使用时其实非常简单，你只需要在特定的方法中调用相关的函数，来实现数据的重载，就可以实现上拉刷新的功能。

---

云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。

技术文档：https://www.cloudbase.net/
如果你想要了解更多关于云开发CloudBase相关的技术故事/技术实战经验，请扫码关注【腾讯云云开发】公众号～