The WeChat applet implements the instance code for paging drop-down loading

This article introduces the sample code for implementing paging drop-down loading of applets. in a twinkling of an eye, we have taught you that there are already ten series of courses in the mini program series, and the daily work pressure is heavy, little Women do not know how long they can stick to this series of tutorials. I only hope that each tutorial will be helpful to you. In this lesson, we will introduce how to implement paging drop-down loading. let's take a look at it first.

     
  
   
CopyRight: All Right Reserved
      
  
   
Author: 51 applets
      
  
   
Applet Developer Community
      
  
   
HTML51.COM
      
  
   
      
  
   Click to go to the drop-down menu to load the demo page
  
 

When a user opens a page, assuming that the background data volume is large and all data is returned to the client at one time, the page opening speed will decrease, in addition, when users only view the above content and do not need to view the following content, it also wastes user traffic. based on the optimization perspective, the background should not return all data at once, when the user needs to flip down, load more data.

Business requirements:

When the list scroll to the bottom, continue to pull up and load more content

Required parameters:

(1) pageindex: 1 // Number of times of loading

(2) callbackcount: 15 // number of data to be returned

Other parameters:

According to the required parameters of the interface

Implementation principle:

When you access the interface for the first time, pass two required parameters (15 data records need to be returned for 1st times) and other parameters (strings to be searched) to the background, the first data is returned in the background. In the callback function for successful requests, if the returned data is greater than 0, yes, the data is retrieved, the view layer is rendered, and "pull up and load up" is displayed at the bottom of the list; no, there is no data, and "no more" is displayed at the bottom of the list, and "pull up and load" is hidden.

When the user has rolled to the bottom of the list (bindscrolltolower event of the scroll-view component provided by the applet is used here), the bindscrolltolower event is triggered. the parameter pageindex + 1, then, the two necessary parameters (15 data records are returned for 2nd times) and other parameters (strings to be searched) are sent to the backend, the background returns the remaining data to the foreground. The foreground adds data based on the original data.

The main page result is as follows:
1. index. wxml

    
       
            
             
         
        
   
    
Search
      
     
       
          
             
              
     
      
{Item. songname }}
              
                
      
        {Item. name }}
               
            
           
    
     
Loading more...
           
    
     
Loaded all
         
        
   
 

2. index. wxss

Page {display: flex; flex-direction: column; height: 100%;}/* Search */. search {flex: auto; display: flex; flex-direction: column; background: # fff ;}. search-bar {flex: none; display: flex; align-items: center; justify-content: space-between; padding: 20rpx; background: # f4f4f4 ;}. search-wrap {position: relative; flex: auto; display: flex; align-items: center; height: 80rpx; padding: 0 20rpx; background: # fff; border-radius: 6rpx ;}. search-wrap. icon-search {margin-right: 10rpx ;}. search-wrap. search-input {flex: auto; font-size: 28rpx ;}. search-cancel {padding: 0 20rpx; font-size: 28rpx;}/* search result */. search-result {flex: auto; position: relative ;}. search-result scroll-view {position: absolute; bottom: 0; left: 0; right: 0; top: 0 ;}. result-item {position: relative; display: flex; flex-direction: column; padding: 20rpx 0 20rpx 110rpx; overflow: hidden; border-bottom: 2rpx solid # e5e5e5 ;}. result-item. media {position: absolute; left: 16rpx; top: 16rpx; width: 80rpx; height: 80rpx; border-radius: 999rpx ;}. result-item. title ,. result-item. subtitle {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 36rpx ;}. result-item. title {margin-bottom: 4rpx; color: #000 ;}. result-item. subtitle {color: #808080; font-size: 24rpx ;}. result-item: first-child. subtitle text {margin-right: 20rpx ;}. result-item: not (: first-child ). subtitle text: not (: first-child): before {content: '/'; margin: 0 8rpx ;}. loading {padding: 10rpx; text-align: center ;}. loading: before {display: inline-block; margin-right: 5rpx; vertical-align: middle; content: ''; width: 40rpx; height: 40rpx; background: url (.. /index/images/icon-loading.png) no-repeat; background-size: contain; animation: rotate 1 s linear infinite ;}. loading. complete: before {display: none ;}

3. index. js

Var util = require ('.. /.. /utils/util. js ') Page ({data: {searchKeyword: '', // The searchSongList: [] character to be searched, // put the returned data array isFromSearch: true, // used to determine whether the searchSongList array is an empty array. the default value is true. the empty array searchPageNum: 1. // sets the number of times to be loaded. the default value is the first callbackcount: 15, // The number of returned data: searchLoading: false, // variable for "pull up loading". The default value is false. the searchLoadingComplete: false // variable for "no data" is hidden. the default value is false, hide}, // input box event. every time one character is entered, a bindKeywordInput: function (e) {c Onsole. log ("input box event") this. setData ({searchKeyword: e. detail. value})}, // search, access network fetchSearchList: function () {let that = this; let searchKeyword = that. data. searchKeyword, // input box string as the parameter searchPageNum = that. data. searchPageNum, // specify the number of times of loading as the parameter callbackcount = that. data. callbackcount; // number of returned data // access network util. getSearchMusic (searchKeyword, searchPageNum, callbackcount, function (data) {console. log (data) // determines whether If there is data, obtain the data if (data. data. song. curnum! = 0) {let searchList = []; // If isFromSearch is true, retrieve data from data. otherwise, add that. data. isFromSearch? SearchList = data. data. song. list: searchList = that. data. searchSongList. concat (data. data. song. list) that. setData ({searchSongList: searchList, // obtain the data array zhida: data. data. zhida, // The searchLoading object that stores the singer attributes: true // Set the variable "pull-on loading" to false, show}); // no data, show "no data" and hide "pull up and load"} else {that. setData ({searchLoadingComplete: true, // set "no data" to true, display searchLoading: false // Set the variable "pull up loading" to false, hide}) ;}}}, // Click the search button to trigger the event KeywordSearch: function (e) {this. setData ({searchPageNum: 1, // load for the first time, set 1 searchSongList: [], // place the returned data array, set to empty isFromSearch: true, // load for the first time, set true searchLoading: true, // Set the variable "上 "to true, display searchLoadingComplete: false // set "no data" to false, hide}) this. fetchSearchList () ;}, // scroll to the bottom to trigger the event searchScrollLower: function () {let that = this; if (that. data. searchLoading &&! That. data. searchLoadingComplete) {that. setData ({searchPageNum: that. data. searchPageNum + 1, // each time the pull event is triggered, the searchPageNum + 1 isFromSearch: false // trigger to the pull event, set isFromSearch to false}); that. fetchSearchList ();}}})

The above is the detailed content of the instance code that the applet implements paging drop-down loading. For more information, see other related articles in the first PHP community!