On a 101 column, we described how to use cloud database development to achieve a list of applets automatically load bottoming function , corresponding to pull refresh the list of applets how should we achieve it? This column will be answered for everyone.
Rationale
In the applet, if we want to achieve a pull-refresh function, then we need to monitor applet page of onPullDownRefreshevents, we can achieve loading and replacement data in this method in order to achieve the page refresh and update data.
Implementation code
Under normal circumstances the pull to refresh
First, let's take a look at the general case of pull-refresh function realization. "General" here means you are not using scroll-viewcomponents of the scene, or using horizontal scroll-viewscene, the list is built directly inside the page, instead of building the scroll-viewinternal.
In this case, if we want to achieve on the pull to refresh the page, you need app.jsonthe window, or configuration page added options enablePullDownRefresh, and configure it true.
// app.json
{
...
"window":{
"enablePullDownRefresh":true
}
...
}
// page.json
{
"enablePullDownRefresh":true
}After configured, we can begin to configure. We need to implement into the pull-down refresh the page, in this page, we need to Pageadd constructor onPullDownRefreshmonitor function.
Page({
onPullDownRefresh:function(){
// 这里我们需要进行页面的加载。
}
})We need to onPullDownRefreshfunction, we added the code query data, enabling data to update and replace, generally the code written as follows:
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)
})
}
})In the above code, we in the onPullDownRefreshmethod of adding the database query method of cloud development, and joined in the success callback method in the database query setDatamethod to update the data to ensure that our applet page data can be updated.
In the setDatacallback method, I joined on wx.stopPullDownRefreshthe call, this API can stop off small program PullDownRefreshof dynamic efficiency, thereby avoiding lost data update is complete, but the page is still in the state drop down loaded.
In this way, we have enough to deal with the situation on the scene in the vast majority of the pull to refresh.
The special circumstances pull refresh
In addition to using the pull-refresh API directly on the page beyond, there will be another scenario is that we will fix top of the page, beneath the rolling part, such as video playback page Tencent video. This page is placed above a Video Player, a placement below scroll-viewto complete the slide in order to achieve the effect of a fixed top of the Video Player. In this case, we should pull to refresh on how to achieve it?
In fact, very simple, we only need to use scroll-viewthe components of bindscrolltoupperthe event to complete the pull-refresh function.
In the concrete implementation, we need to scroll-viewjoin the corresponding configuration components.
<scroll-view upper-threshold="50" bindscrolltoupper="onTopper">
<!--- 具体的内容 -->
</scroll-view>Then, in the corresponding page, including specific event triggers, the following reference code:
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)
})
}
})In this way, we can achieve within ScrollView realized on the bottom of a pull effect.
In this code, because we have no direct effect pull the trigger on the page, so here we use wx.startPullDownRefreshto pull the trigger effect on the page, and then use the API to develop cloud to finish loading the data, after completion, call the load wx.stopPullDownRefreshmethod, stop pull out the refresh animation.
In this way, even if we are not directly trigger event page, but you can achieve similar results page.
to sum up
Pull-refresh is a function of our very popular, in fact, very simple in use, the associated function you only need to call in a particular way, the heavy load of data to achieve, you can achieve a pull-refresh function.
If you want to learn more about cloud-related technologies developed CloudBase story / technical hands-on experience, please scan code concerns [the development] and so Tencent public to No.
