![5a5304afd0e4ac6a1be2ba2e35c812e8.png](https://i-blog.csdnimg.cn/blog_migrate/7f21e503e97bcda8970b288550881d7f.jpeg)
云开发数据库之上拉刷新
在开发小程序的列表的时候,我们往往会使用一些小程序的特性,比如「触底自动加载」、「上拉刷新」,在上一篇文章中,我们介绍了「触底自动加载」,这一次,我们来介绍一下上拉自动刷新。
原理说明
在小程序中,如果我们希望实现上拉刷新的功能,则需要我们监听小程序页面的 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 固定的效果。在这种情况下,我们应该如何实现上拉刷新呢?
![66febb2fb398d45f3250fae3751aaf08.png](https://i-blog.csdnimg.cn/blog_migrate/c34f8982a4ee55920e15a9bbcd104dd4.jpeg)
其实也很简单,我们只需要利用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
方法,停掉上拉刷新的动画效果。
这样,即使我们没有直接触发页面的事件,但可以达到类似的页面效果。
总结
上拉刷新是一个我们很常用的功能,在使用时其实非常简单,你只需要在特定的方法中调用相关的函数,来实现数据的重载,就可以实现上拉刷新的功能。
联系我们
更多云开发使用技巧及 Serverless 行业动态,扫码关注我们~
![98ff92aa4b5580b07116a0f2e2c2030b.png](https://i-blog.csdnimg.cn/blog_migrate/cd2a924703c52fc8a305dab42865eebc.png)