Uni-app implements data pull-up and load more functional examples

Implement pull-up loading more

Open the configuration file in the project root directory and configure the bottoming distance for the goods goods_list page in the subPackages subpackage:

"subPackages": [
   {
     "root": "subpkg",
     "pages": [
       {
         "path": "goods_detail/goods_detail",
         "style": {}
       },
       {
         "path": "goods_list/goods_list",
         "style": {
           "onReachBottomDistance": 150
         }
       },
       {
         "path": "search/search",
         "style": {}
       }
     ]
   }
 ]

In the goods_list page, it is on the same level as the methods node, and declares the onReachBottom event handler function to listen to the page's pull-up bottoming behavior:

// The bottoming eventonReachBottom() {
  // Let the page number value increase +1   += 1
  // Retrieve list data  ()
}

Remove the getGoodsList function in methods. After the list data request is successful, the new and old data are spliced:

// Method to get product list dataasync getGoodsList() {
  // Make a request  const { data: res } = await uni.$('/api/public/v1/goods/search', )
  if ( !== 200) return uni.$showMsg()
 
  // Assign value to data: splicing old and new data through the form of expansion operators   = [..., ...]
   = 
}

optimization:

Prevent additional requests from being initiated through throttle valve

Defining isloading throttle in data is as follows:

data() {
  return {
    // Is data requested?    isloading: false
  }
}

Modify the getGoodsList method, and open and close the throttle valve before and after requesting data:

// Method to get product list dataasync getGoodsList() {
  // ** Open the throttle valve   = true
  // Make a request  const { data: res } = await uni.$('/api/public/v1/goods/search', )
  // ** Close the throttle valve   = false
 
  //Omit other codes...}

In the onReachBottom bottoming event handling function, decide whether to initiate a request based on the status of the throttle valve:

// The bottoming eventonReachBottom() {
  // Determine whether other data is being requested. If so, no additional request will be initiated.  if () return
 
   += 1
  ()
}

Determine whether the data has been loaded

If the following formula is true, it proves that there is no data on the next page:

Current page number value * How many pieces of data are displayed per page >= Total number

pagenum * pagesize >= total

Modify the onReachBottom event handling function as follows:

// The bottoming eventonReachBottom() {
  // Determine whether there is still data on the next page  if ( *  &gt;= ) return uni.$showMsg('The data is loaded!  ')
 
  // Determine whether other data is being requested. If so, no additional request will be initiated.  if () return
 
   += 1
  ()
}

https:///article/

Summarize

This is the article about uni-app implementing more functions for data pull-up loading. For more related uni-app data pull-up loading, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!