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

In-depth understanding of MySQL slow query log

Table of contents What is the slow query log? How...

How to use nginx to simulate blue-green deployment

This article introduces blue-green deployment and...

Common array operations in JavaScript

Table of contents 1. concat() 2. join() 3. push()...

Detailed usage of React.Children

Table of contents 1. React.Children.map 2. React....

A detailed discussion on detail analysis in web design

In design work, I often hear designers participati...

An enhanced screenshot and sharing tool for Linux: ScreenCloud

ScreenCloud is a great little app you didn’t even...

DOCTYPE Document Type Declaration (Must-Read for Web Page Lovers)

DOCTYPE DECLARATION At the top of every page you w...

Introduction to installing and configuring JDK under CentOS system

Table of contents Preface Check and uninstall Ope...

Detailed explanation of Nginx status monitoring and log analysis

1. Nginx status monitoring Nginx provides a built...

mysql5.7.21 utf8 encoding problem and solution in Mac environment

1. Goal: Change the value of character_set_server...

Summary of ten Linux command aliases that can improve efficiency

Preface Engineers working in the Linux environmen...

How to install vncserver in Ubuntu 20.04

Ubuntu 20.04 has been officially released in Apri...

The latest mysql-5.7.21 installation and configuration method

1. Unzip the downloaded MySQL compressed package ...

Brief analysis of the various versions of mysql.data.dll driver

Here is the mysql driver mysql.data.dll Notice: T...

Vue realizes the product magnifying glass effect

This article example shares the specific code of ...