WeChat applet implements waterfall flow paging scrolling loading

This article shares the specific code for WeChat applet to implement waterfall flow paging scrolling loading for your reference. The specific content is as follows

Two paging methods

The normal paging effect provides buttons for clicking the next page and the previous page at the bottom of the page. The interface for retrieving data is triggered only after clicking the buttons. This method generally provides a good user experience.

Another paging effect does not require the user to click a button. As long as the last few pieces of data on the current page are browsed, the system will automatically send a request to obtain the data of the next page and display it on the page, so that an effect similar to infinite scrolling can be achieved.

Taking csdn as an example, when the scroll bar reaches this place, it will automatically call the interface to request the next page of data, and then accumulate it to the loaded data list

Implementation ideas

There is a problem with the scrolling paging method. When the user scrolls very fast, the second request may start before the first request is completed. To avoid this problem, we can add a lock flag, lock it after sending a request, and release the lock after the request is completed. This can perfectly avoid this problem.

Get the idea of implementation

1. Determine whether there is any data that can be loaded
2. Get the lock
3. Send request and call interface
4. Release the lock
5. Return data

Code Implementation

First we need a paging object

class Paging{
  page //Record the current page number count //Record the number of pages displayed req //Interface request object (I have encapsulated it here, and you can define the properties according to your needs)
  url //Request path moreData = true //Is there a next page of data? (By default, there is a next page of data when the request is made for the first time)
  accumulator = [] //Loaded data list locker = false //Lock flag}

Define a constructor for the paging object, which starts requesting from the first page by default, with five data items per page

constructor(req, page=0, count=5){
    this.page = page
    this.count = count
    this.req = req
    this.url = req.url
  }

Next, write the getMoreData method

getMoreData(){
 //1. Determine whether the next page of data exists//2. Get the lock and determine whether the lock is released//3. Request data//4. Release the lock}

1. Determine whether there is next page data

Here we directly get the moreData attribute for judgment

if(!this.moreData){
      return
}

2. Get the lock

A new method is added here. If there is no lock currently, it means that you can continue to request data. Before requesting data, set the lock flag to true to prevent the next request from continuing to send.

_getLocker(){
    if(this.locker){
      return false
    }
    this.locker = true
    return true
}

3. Request data

The data structure we need to return to the page is as follows:

{
        empty, //Is it empty? items, //Current page data moreData, //Is there a next page of data accumulator //All data that has been requested}

First define a method to obtain the request structure

 _getCurrentReq(){
    let url = this.url
    //Set request parameters const params = `page=${this.page}&count=${this.count}`
    //Judge the splicing method if(url.includes('?')){
      url += '&' + params
    }else{
      url += '?' + params
    }
    this.req.url = url
    return this.req
 }

The method to obtain data is as follows:

 _actualGetData(){
 
    const req = this._getCurrentReq() //Get the specific request content let paging = Http.request(req) //Call the request method in the custom tool to obtain data //If no result is obtained, return null directly
    if(!paging){
      return null
    }
  
    if (paging.total === 0) {
      return {
        empty: true,
        items: [],
        moreData: false,
        accumulator: []
      }
    }
    
    //If the current page number is less than the total page number, it means there is still data for the next page, set moreData to true, otherwise set it to false
    this.moreData = pageNum < totalPage-1 ? true : false
    
    //If there is data for the next page, increase page by 1 to facilitate the next acquisition if (this.moreData) {
      this.page += 1
    }
    
    //Because the waterfall flow display data needs to be accumulated, the data list also needs to be accumulated this.accumulator = this.accumulator.concat(paging.items)
    return {
      empty: false,
      items: paging.items,
      moreData: this.moreData,
      accumulator: this.accumulator
    }
 }

4. Release the lock

To release the lock, simply change the state of the lock identifier.

this.locker = false

The getMoreData method is written, and then it can be called in the js file of the corresponding interface

It needs to be called automatically once when the interface is first entered, and then called again each time the user touches the bottom

initBottomSpuList(){
 //Get the paging object const paging = new Paging({
      url: url
    })
    //Store the paging object in js data this.data.spuPaging = paging
    //Call method const data = paging.getMoreData()
    if(!data){
      return
    }
    //Reload the waterfall flow wx.lin.renderWaterFlow(data.items)
},

WeChat applet has its own function that is automatically triggered when the bottom is touched. Just write the method call code into this function.

onReachBottom: function () {
    const data = this.data.spuPaging.getMoreData()
    if(!data){
      return
    }
    //Reload the waterfall flow wx.lin.renderWaterFlow(data.items)
}

At this point, you can achieve the effect of waterfall flow paging scrolling loading

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Ideas and codes for implementing waterfall flow layout in uniapp applet
Mini Program waterfall flow component realizes page turning and image lazy loading
Implementation of a simple two-column waterfall effect in a mini program
WeChat applet implements waterfall flow layout through js
Implement waterfall effect on web pages and WeChat applet pages
Detailed explanation of how to implement waterfall layout and infinite loading in WeChat applet
Sample code for implementing a truncated waterfall component in WeChat mini program

<<: Detailed explanation of the installation and configuration of ROS in CLion2020.1.3 under ubuntu20.04

>>: How to quickly modify the table structure of MySQL table