Catalog

One A brief introduction onreachBottom event

  Two   Example show

  3、 ... and Some problems encountered

One A brief introduction onreachBottom event

        onreachBottom and onLoad as well as onShow equally , All belong to the life cycle events of applets , The function is to trigger this event when the page is pulled down to the bottom , It is generally applicable to the case with more data , Realize lazy loading and paging display data .

        The screenshot shows the applet pair onreachBottom Specific explanation and parameters of the event .

  Two   Example show

The example shown this time is the effect of loading data in the pull-down page of loading used car source information on the homepage of the applet .

1. The first thing you need to do is data It initializes the number of pages paged and the data array obtained .

   

2. Write a method to load new data and retain old data after hitting the bottom . I put loading the first page data and bottom loading new data into a method , Method adds a Boolean reachBottom Parameters , stay onLoad The parameter in the event is false, Only the first page is loaded ; stay onreachBottom The parameter in the event is true, To load new data .
3. The method of requesting from the backend is util.request, See my last blog for details , Post a link . There are many parameters here , Mapping

   

   https://blog.csdn.net/weixin_53387347/article/details/125742037?spm=1001.2014.3001.5502
4. Save the data requested from the back end in supplyList in , And through setData Method write data Medium supplyList in , Save the total number of pages in totalPages in , Finally, add one to the number of pages after each full page of data is obtained , Prepare for the next page to call data . The overall code of the method is as follows .

   getSupplyList(reachBottom) {// The parameter indicates whether to load data for the bottom pull-down 
       wx.showLoading({
         title: ' Loading ...',
       });
       let that = this;// In the sweet potato ,this Sometimes you can't use it directly , Prevent out bug Initialized one that
       util.request(api.SupplyList, {// Send a request 
         type: that.data.type,
         page: that.data.page,
         limit: that.data.limit,
         searchValue: that.data.searchValue// Four parameters of the request 
       }).then(function (res) {
         console.log(that.data.page);
         if (res.errno === 0) {// by 0 The request is successful 
           let supplyList = res.data.list.map(item => {
             item.dueTime = util.formatTime2(new Date(item.dueTime), "Y/M/D");// Set the date format 
             item.herbListImage && (item.herbListImage01 = item.herbListImage.split(',')[0])// Set the list of acquired pictures 
             item.companyLogo = item.companyLogo || item.avatar;
             item.companyName = item.companyName || item.nickname;
             return item;// Return this piece of data supplyList And save 
           });
           // Touch the bottom to load new data and retain old data 
           if (reachBottom) {
             supplyList = [...that.data.supplyList, ...supplyList]// Add new data to old data 
           }
           that.setData({// Assign the obtained value to data Array and total pages in 
             supplyList: supplyList,
             totalPages: res.data.pages
           });
           that.data.page++// Add one to the number of pages after all operations are completed 
           wx.hideLoading();
         }
       }).finally(() => {
         wx.hideLoading();
       });
     },

5. Write well getSupplyList After method , Can be in onReachBottom Call in the bottom loading event , When calling, judge whether the current page is less than the total number of pages , Call if less than , And after each call, add one to the current number of pages , The code is as follows .

     onReachBottom() {// Bottom loading event 
       if (this.data.totalPages > this.data.page) {// Judge whether the current number is less than the total number of pages 
         this.setData({
           page: this.data.page + 1// Add one to the current page 
         });
       } else {
         return false;
       }
       this.getSupplyList(true);// Calling method 
     },

   In this way, the function of bottom loading has been realized . Pictured

   

     3、 ... and Some problems encountered

In the process of actual development , There are some problems , I can share with you , learn from each other

         During the test , The first paging load is achieved , None of the latter has been realized , After the investigation , After the first paging this.data.page That is, the current page becomes 3, After refreshing the page, it is not reinitialized to 1, So we need to re assign the page to 1, Pictured .

         Writing getSupplyList When the method is used , stay data The variables defined inside are always displayed when used undefined Undefined , stay csdn The reason is found on , Because in js In some functions or callback functions of , Direct use this May be inaccessible , You need to redefine a variable instead of this, The solution is as follows , use that Instead of this To use data The variables in the .

          If you want to realize the function of non touching bottom loading like that in the dynamic diagram , Just in the corresponding json Added to the document "onReachBottomDistance": 300, It can be at the bottom 300 Start to execute the bottom loading event .

Welcome to the discussion .