When we display data on the page, whether it is PC or mobile , in many cases we need to display many, many pieces of data.
For example, in a shopping mall, the number of products is very large. But when we get data from the background, the number of data transfers is always limited. This is also for performance considerations . The data given to us in the background may be 20 or 100.
So if our task is to render 1000 items in the database, what should we do? At this time, you need to use the paging function, we can divide 1000 products into 50 pages, with 20 data per page.
In this way, the purpose of rendering 1000 pieces of data is achieved without affecting excessive performance.
Next, we use WeChat applet cloud development to implement data paging.
onLoad: function (options) {
wx.showLoading({
title: '加载中',
})
var that = this;
db.collection('zaoCan').get({
success(res){
that.setData({
breakfastFood:res.data,
food:res.data
})
console.log('food',that.data.food);
wx.hideLoading({
success: (res) => {
},
})
}
})
},
I take a project I did recently as an example. What I want to do is a recipe. My database has about 11,000 data, but I definitely can't render them all on the page.
First, we get 20 pieces of data from the database in the onLoad function. And setData to food, this food is the data we rendered in WXML.
At this time, we can see that we got 20 pieces of data and stored them in the food, and successfully rendered them on the page.
Then for paging, we need to use another life cycle function onReachBottom .
onReachBottom is the processing function of the page pull bottom event.
The properties of this life cycle function fully meet our paging needs . When the user pulls down the interface, they want to view more recipe information, but we currently only have 20. If the user keeps pulling, it will definitely be pulled to the bottom of the page. , This time the onReachBottom function will be triggered, and we will implement paging operations in this function.
onReachBottom: function () {
wx.showLoading({
title: '加载中',
})
var that = this;
var array = that.data.food;
var name = '';
if(that.data.TabCur == 0){
name = 'zaoCan'
}else if(that.data.TabCur == 1){
name = 'wuCan'
}else if(that.data.TabCur == 2){
name = 'wanCan'
}
if(that.data.value == ''){
db.collection(name).skip(array.length).get({
success(res){
if(res.data.length !== 0){
for(var i = 0; i < res.data.length; i++){
array.push(res.data[i]);
}
console.log(array);
that.setData({
food:array
})
wx.hideLoading({
success: (res) => {
wx.showToast({
title: '加载成功',
})
},
})
}else {
wx.showToast({
icon:'none',
title: '无更多菜谱',
})
}
}
})
}else {
db.collection(name).skip(array.length).where({
name:db.RegExp({
regexp:that.data.value,
options:'i'
})
}).get({
success(res){
if(res.data.length !== 0){
console.log(res.data);
for(var i = 0; i < res.data.length; i++){
array.push(res.data[i]);
}
console.log(array);
that.setData({
food:array
})
wx.hideLoading({
success: (res) => {
wx.showToast({
title: '加载成功',
})
},
})
}else {
wx.showToast({
icon:'none',
title: '无更多信息',
})
}
}
})
}
},
The above is all the code in my function. There are many things that have nothing to do with paging. The core code is the following:
db.collection(name).skip(array.length).get({
success(res){
for(var i = 0; i < res.data.length; i++){
array.push(res.data[i]);
}
console.log(array);
that.setData({
food:array
})
console.log('food',that.data.food);
})
}
})
Let's explain below. It is still a normal operation of fetching values from the database, but we have added a skip attribute . The function of this attribute is to specify that the query returns the result from the result after the specified sequence. It is often used for paging .
You may be a little confused, let me explain in plain language, we now have 20 data in the food, then when I retrieve the value from the database again, I only need to fetch the data after the 20th data, the array in skip we are The value has been assigned in the previous long code, which is the food rendered in the page.
So if we paging, we only need to take the data after the existing data index . And we can only use variables to achieve, because this skip is an indefinite value . It may be 20, 40, 60...
Then the content in the success callback is to push the queried data into the existing data to achieve a summary effect.
Then we have achieved the actual paging effect.
The amount of data in food is constantly increasing as the user's pull-down operation is monitored. This is the classic paging function in actual opening.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
