专栏首页小程序·云开发专栏​借助云开发数据库实现小程序列表上拉刷新功能丨云开发101
原创

​借助云开发数据库实现小程序列表上拉刷新功能丨云开发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相关的技术故事/技术实战经验想要跟大家分享,欢迎留言联系我们哦~比心!

微信截图_20190729152259.png

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用云开发在5.20表白的正确打开方式

    细数一下,每年的情人节还真是有点多呢:传统情人节、白色情人节、七夕情人节…近些年又流行起5.20网络情人节,这让广大单身汪们不禁感到错愕:怎么女朋友迟迟不来,情...

    腾讯云开发TCB
  • Q&A第二辑|你最关心的云开发问题都在这了

    关于小程序使用云开发很多小伙伴有不少疑问,Q&A第二辑还是汇总了几个比较常见的问题,在这里一一为大家解答一下。

    腾讯云开发TCB
  • Omi × 云开发『半天』搞定小程序 『markdown 内容发布系统』

    开发者可以使用「云开发」开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。「云开发」为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用...

    腾讯云开发TCB
  • PromQL 使用基础

    Prometheus 通过指标名称(metrics name)以及对应的一组标签(label)唯一定义一条时间序列。指标名称反映了监控样本的基本标识,而 lab...

    我是阳明
  • 小朋友学C语言(16):斐波那契数列的非递归实现

    一、斐波那契简介 斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,...

    海天一树
  • 【编程之美】最短路径

    最短路径 任意给定两个数字A和B,通过将A和6个数(7,-7,5,-5,12,-12)做加减运算,运算次数不限,每个数可以被使用多次,求从A到B最少要经过多少次...

    程序员互动联盟
  • 如何配合流处理让 PowerBI 在整点完成自动刷新

    这里有个问题是:如果你和老板(看报告的重要人物)约定了说每天 9:00 刷新数据,而他 9:00 来看的时候,发现报告并没有刷新呢,因为这时候数据还没有刷新完成...

    BI佐罗
  • 项目经理应当会些什么?

    好的项目经理他应该是项目组的勤务兵,是一个实实在在的服务者,如果你需要的是权威,而缺乏服务精神,千万别选择项目经理这个职位,否则,只会带来失败的项目成...

    阿敏总司令
  • Linux-Shell变量

    悠扬前奏
  • 使用httpstat测试网站响应时间

    httpstat是用Python写的脚本,可以用来测试http服务器的回应速度。 httpstat本质上就是封装了cURL工具,所以它可以接受各种 cURL的选...

    Python疯子

扫码关注云+社区

领取腾讯云代金券