WeChat applet scroll-view implements a solution to duplicate data loading when pulling up

WeChat applet scroll-view implements a solution to duplicate data loading when pulling up

The scroll-view of WeChat applet has more bugs when pulling up to load (excessive data will be loaded, and there may even be duplicate data).

Problem description: Pulling up once will trigger the bottoming function onReachBottom() multiple times; changing to a custom load more function, such as loadMore(), the problem still exists.

Production environment: This problem still exists in the latest version 1.9.94 of the debugging base library.

Solution: Add state control variables to limit the triggering conditions of the bottoming function/loading more functions.

After pulling up the page to load more, see the picture below, there is duplicate data

General front-end wxml code search.wxml

<!--pages/shop/search.wxml-->
<scroll-view scroll-y="true" style="height:{{windowHeight}}px;" bindscrolltolower="onReachBottom">

      <!-- Product List -->
      <view class="flex-wrp">
         <block wx:for="{{items}}">
            <view bindtap="onItemClick" class="item-box" data-iid="{{item.id}}"> 
               <image class="item-pic" src="{{item.thumb}}" mode="aspectFill"></image>
               <view class="item-info">
                  <view class='item-name'>{{item.name}}</view>
                  <view class='price-sold-box'>
                     <text class='current-price'>¥{{item.current_price}}</text>
                     <text class='item-sold'><text class='sold-title'>Sales volume</text> {{item.sold_num}}</text> 
                  </view>
               </view>
            </view> 
         </block> 
      </view>
      <view wx:if="{{pageEnd==true}}" class='scrollEnd'>All data has been displayed...</view>
</scroll-view>

First look at test case 1 search.js (unfixed BUG)

//pages/shop/public/search/search.js
/* JS use case with BUG */

const app = getApp();
var page = 0; //Page tag Page({
   data: {
      pageEnd:false, //Is it the bottom of the page? windowHeight: app.getWH(), //Application height // Product list array items:[],
   },

   /***************************** System and page function ****************************/
   //Page loading onLoad: function (options) {
      //First load this.getServerItems(page);
   },
   // Bottom touch function (pull up to load more)
   onReachBottom: function () {
      this.getServerItems(page);
   },

   /************************* Network request**************************/
   /**
    * Get the server product list * @param {string} page paging default 0
    */
   getServerItems: function (pg) {
      var tar = this;
      //Set the default value pg = pg ? pg : 0;
      wx.showLoading({//Show toast
         title: 'Loading...',
      });
      //Network request wx.request({
         url: "https://xxx.com/api/items/search",
         data: {page: pg},
         method: 'POST',
         header: { 'content-type': 'application/x-www-form-urlencoded' },
         success: function (res) {//Network request successful if (res.data.status == 1) {//There is new data var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  items: arr,
               });
               page++;

            } else {//res.data.status == 0 No new data tar.setData({
                  pageEnd:true, //display bottom of page information})
            }

         },
         error: function (e) {//Network request failed console.log(e);
         },
         complete: function(c){//Network request completed wx.hideLoading();//Hide toast
         }
      })

   },

Fix the BUG, ​​add the bottom function control variable canUseReachBottom to the search.js above

//pages/shop/public/search/search.js
/* JS use case after fixing the BUG*/

const app = getApp();
var page = 0;
/* ------------------------- */
var canUseReachBottom = true; //Bottom touch function control variable /* ------------------------- */
Page({
   data: {
      pageEnd:false, 
      windowHeight: app.getWH(),
       items:[],
   },
   onLoad: function (options) {
      this.getServerItems(page);
   },
   // Bottom touch function (pull up to load more)
   onReachBottom: function () {
      /* ------------------------- */
        if(!canUseReachBottom) return; //If the bottoming function is not available, the network request data will not be called /* ------------------------- */
      this.getServerItems(page);
   },
   ServerItems: function (pg) {
      /* ------------------------- */
        canUseReachBottom = false; //Close the bottom touch function /* ------------------------- */
      var tar = this;
      pg = pg ? pg : 0;
      wx.showLoading({
         title: 'Loading...',
      });
      wx.request({
         url: "https://xxx.com/api/items/search",
         data: {page: pg},
         method: 'POST',
         header: { 'content-type': 'application/x-www-form-urlencoded' },
         success: function (res) {
            if (res.data.status == 1) {//There is new data var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  items: arr,
               });
               page++;
              /* ------------------------- */
                canUseReachBottom = true; //There is new data, the bottoming function is turned on, preparing for the next bottoming call /* ------------------------- */
            } else { 
               tar.setData({
                  pageEnd:true,
               })
            }

         },
         error: function (e) {
            console.log(e);
         },
         complete: function(c){
            wx.hideLoading();
         }
      })

   },

Summary: The cause of the BUG may be that after the bottoming function is triggered, network data is requested -> the mini program renders the data to the front end. Because these two processes are time-consuming, the front end has not had time to complete the rendering, and the bottoming function determines that the front end page is still at the bottom, and triggers the bottoming function again or multiple times. This results in repeated loading of data.

You can also see it by looking at the vConsole of the mobile app development version. Pulling up once triggers three network requests to begin in succession, and then the server returns the success results one by one with a delay. As shown in the figure:

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:
  • WeChat applet implementation pull-up loading function example [load more data/bottom loading/click to load more data]
  • How to load real data from database in WeChat applet
  • Using ECharts to asynchronously load data and implement chart functions in WeChat applet
  • How to use ECharts to asynchronously load data in WeChat applet
  • WeChat applet implements menu-following effect and loop nested loading data
  • WeChat applet page sliding screen loading data effect
  • WeChat applet slide up to load and pull down to refresh (onscrollLower) loads data in batches (Part 2)
  • WeChat applet slide up to load and pull down to refresh (onscrollLower) loads data in batches (I)
  • WeChat applet dynamic loading data example code

<<:  How to solve the 10060 unknow error when Navicat remotely connects to MySQL

>>:  Detailed explanation of how to copy and backup docker container data

Recommend

Detailed explanation of MySQL slow log query

Slow log query function The main function of slow...

javascript Blob object to achieve file download

Table of contents illustrate 1. Blob object 2. Fr...

Detailed explanation of Vue's monitoring method case

Monitoring method in Vue watch Notice Name: You s...

Xhtml special characters collection

nbsp &#160; no-break space = non-breaking spa...

React introduces antd-mobile+postcss to build mobile terminal

Install antd-mobile Global import npm install ant...

How to display texture at the position of swipe in CocosCreator

Table of contents 1. Project requirements 2. Docu...

The difference between HTML name id and class_PowerNode Java Academy

name Specify a name for the tag. Format <input...

Introduction to the process of installing MySQL 8.0 in Linux environment

Table of contents Preface 1. Linux changes the yu...

Sample code for implementing history in vuex

I have recently been developing a visual operatio...

Use iptables and firewalld tools to manage Linux firewall connection rules

Firewall A firewall is a set of rules. When a pac...

Web design tips on form input boxes

1. Dashed box when cancel button is pressed <br...

How to create a Pod in Kubernetes

Table of contents How to create a Pod? kubectl to...

How to use HTML 5 drag and drop API in Vue

The Drag and Drop API adds draggable elements to ...

Analysis of MySQL's method of exporting to Excel

This article describes how to use MySQL to export...