About the code for paged loading of WeChat mini programs

This article mainly introduces the example code of paging loading of WeChat applet. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.

Organize the documents, search out the code for page loading of a WeChat applet, and organize and streamline it a little for sharing.

You should encounter the paging loading function frequently, and there are many application scenarios, such as Weibo, QQ, WeChat Moments and news applications, all have the paging loading function, which not only saves us User traffic also improves user experience. So today’s article is to introduce how to implement the page loading function in WeChat applet. As usual, upload the source code and renderings first.

Source code portal

#To implement such a function, you generally need to add the current number of requested pages and the page size when requesting data ( The number displayed on each page) There are also some interfaces that request data through the requested start offset and end offset. For example, if you display 10 pieces of data on one page, the first (first page) request will start with start and end with 0. is 9, the second page is 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 WeChat applet has helped us encapsulate the trigger events of pull-up and pull-down, as follows

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

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 },

Fans who are new to WeChat applet may encounter a problem, why I rewrote the pull-up and pull-down functions, but when I pull up or pull down, the function Why not call back? 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 pull down, the corresponding function will be triggered.

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 data of each page The size, hasMoreData is used to determine whether to continue to request data when pulling up, that is, whether there is 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 page 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 message is refreshing data, and when pulling up, it prompts that more data is being loaded.

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

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

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

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
  this.data.page = 1
  this.getMusicInfo('正在刷新数据')
 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
  if (this.data.hasMoreData) {
   this.getMusicInfo('加载更多数据')
  } else {
   wx.showToast({
    title: '没有更多数据',
   })
  }
 },

The above is the entire content of this article. I hope it will be helpful to everyone’s study. More related content Please pay attention to PHP Chinese website!

Related recommendations:

WeChat Mini Program image selection area cropping method

WeChat Mini Program Introduction to page jump parameters

The above is the detailed content of About the code for paged loading of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!