How does the mini program implement the function of loading data in pages?

How does the mini program implement the function of loading data in pages? The following article will introduce it to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

When using applications with large amounts of data such as QQ, Weibo or news, you often encounter the page loading function. It not only has a wide range of application scenarios, but also has high efficiency. user experience. WeChat mini programs can also load data in pages. This article introduces How to create page loading data in WeChat mini programs.

To implement such a function, you generally need to add the current number of pages requested when requesting data, as well as the size of the page (the number displayed on each page). Some interfaces also use the start offset and end offset of the request. Request a large amount of data. For example, if you display 10 pieces of data on one page, the first request (the first page) will start with a start of 0 and end with an end of 9. The second page will be from 10 to 19, and so on. Since we want to implement the paging loading function, the most important thing is the processing events of pull-down and pull-up. The trigger events of pull-up and pull-down have been encapsulated for us in the WeChat applet, as follows

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},

Maybe you are new to WeChat applet Program enthusiasts will encounter a question, why do I rewrite the pull-up and pull-down functions, but why do the functions not call back when I pull up or pull down? Don't panic, that's because in addition to rewriting these two functions, we also need to add the following code to the json configuration file

{
enablePullDownRefresh: true
}

With the above code, every time we pull up or down, the corresponding code will be triggered. The corresponding function.

Create data in data

data: {
page: 1,
pageSize: 30,
hasMoreData: true,
contentlist: [],
},

page is the page when the data is currently requested, pageSize is the size of the data on each page, hasMoreData is used for pull-up, is it necessary to continue the request? Data, that is, is there more data? When our network request data is successful, if the length of the requested data is less than pageSize: 30, it means there is no more data, change hasMoreData to false. If the requested data length is 30, it means there is more data, then hasMoreData will be changed permanently. is true, and the page number page is increased by 1. When the page is pulled down, the page is first changed to 1, and then the data is queried. When the data query is successful, if the page is 1, the obtained data is directly assigned to the contentlist. If the page If the number is greater than 1, the requested data will be appended to the contentlist. In this way, the paged loading function can be realized.

After the above analysis, we have a clear understanding of the implementation of paging loading, so next I will introduce the implementation of the code.

getMusicInfo: function (message) {
var that = this
var data = {
showapi_appid:\'25158\',
showapi_sign:\'c0d685445898438f8c12ee8e93c2ee74\',
keyword: \'我\',
page:that.data.page
}
network.requestLoading(\'https://route.showapi.com/213-1\', data, message,function (res) {
console.log(res)
var contentlistTem= that.data.contentlist
if(res.showapi_res_code == 0) {
if(that.data.page == 1) {
contentlistTem= []
}
var contentlist =res.showapi_res_body.pagebean.contentlist
if(contentlist.length < that.data.pageSize) {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:false
})
} else {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:true,
page:that.data.page + 1
})
}
} else {
wx.showToast({
title: res.showapi_res_error,
})
}
}, function (res) {
wx.showToast({
title: \&#39;加载数据失败\&#39;,
})
})
},

The above function is the request processing logic for obtaining music list information. This function has a parameter message, which is used to display the prompt information when loading data. For example, when pulling down, the prompt information is refreshing data. , when pulling up, it prompts that more data is being loaded.

Then we start loading data once when entering the page, that is, in the onLoad function, as follows

onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
that.getMusicInfo(\'正在加载数据...\')
},

Then the implementation of the pull-up and drop-down functions is as follows

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
this.data.page = 1
this.getMusicInfo(\'正在刷新数据\')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
if(this.data.hasMoreData) {
this.getMusicInfo(\'加载更多数据\')
} else {
wx.showToast({
title: \'没有更多数据\',
})
}
},

The paging function can Better display content to users and retain users. Nowadays, mini programs are a new channel for users to obtain information. Many mini programs already have paging functions. It is best to combine data to implement this function. Improper handling can easily lead to data loss and unnecessary losses.

Recommendation: " Mini Program Development Tutorial"

The above is the detailed content of How does the mini program implement the function of loading data in pages?. For more information, please follow other related articles on the PHP Chinese website!