Das WeChat-Applet „Scroll-View“ implementiert eine Lösung zum doppelten Laden von Daten beim Hochziehen

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

      <!-- Produktliste -->
      <Ansichtsklasse="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>
               <Klasse anzeigen="item-info">
                  <view class='item-name'>{{item.name}}</view>
                  <Ansichtsklasse='Verkaufspreis-Box'>
                     <text class='aktueller Preis'>¥{{item.aktueller_Preis}}</text>
                     <text class='item-sold'><text class='sold-title'>Verkaufsvolumen</text> {{item.sold_num}}</text> 
                  </Ansicht>
               </Ansicht>
            </Ansicht> 
         </block> 
      </Ansicht>
      <view wx:if="{{pageEnd==true}}" class='scrollEnd'>Alle Daten wurden angezeigt...</view>
</scroll-ansicht>

//seiten/shop/public/search/search.js
/* JS-Anwendungsfall mit BUG */

const app = getApp();
var page = 0; //Seiten-Tag Page({
   Daten: {
      pageEnd:false, //Ist das das untere Ende der Seite? windowHeight: app.getWH(), //Anwendungshöhe // Produktlisten-Array-Elemente:[],
   },

   /***************************** System- und Seitenfunktion *************************/
   //Seite wird geladen onLoad: Funktion (Optionen) {
      //Laden Sie zuerst this.getServerItems(page);
   },
   // Bottom-Touch-Funktion (nach oben ziehen, um mehr zu laden)
   onReachBottom: Funktion () {
      this.getServerItems(Seite);
   },

   /************************* Netzwerkanfrage************************/
   /**
    * Holen Sie sich die Server-Produktliste * @param {string} page paging default 0
    */
   getServerItems: Funktion (Seite) {
      var tar = dies;
      //Standardwert festlegen pg = pg? pg: 0;
      wx.showLoading({//Toast anzeigen
         Titel: „Wird geladen …“,
      });
      //Netzwerkanfrage wx.request({
         URL: "https://xxx.com/api/items/search",
         Daten: {Seite: pg},
         Methode: 'POST',
         Header: { 'Inhaltstyp': 'Anwendung/x-www-form-urlencoded' },
         Erfolg: Funktion (res) {//Netzwerkanforderung erfolgreich, wenn (res.data.status == 1) {//Es gibt neue Daten, var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  Artikel: arr,
               });
               Seite++;

            } sonst {//res.data.status == 0 Keine neuen Daten tar.setData({
                  pageEnd:true, //Informationen am Seitenende anzeigen})
            }

         },
         Fehler: Funktion (e) {//Netzwerkanforderung fehlgeschlagen console.log(e);
         },
         abgeschlossen: function(c){//Netzwerkanforderung abgeschlossen wx.hideLoading();//Toast ausblenden
         }
      })

   },

//seiten/shop/public/search/search.js
/* JS-Anwendungsfall nach der Behebung des BUG*/

const app = getApp();
var Seite = 0;
/* ------------------------- */
var canUseReachBottom = true; //Steuervariable für die Touch-Funktion unten /* ------------------------- */
Seite({
   Daten: {
      Seitenende:false, 
      Fensterhöhe: app.getWH(),
       Artikel:[],
   },
   onLoad: Funktion (Optionen) {
      this.getServerItems(Seite);
   },
   // Bottom-Touch-Funktion (nach oben ziehen, um mehr zu laden)
   onReachBottom: Funktion () {
      /* ------------------------- */
        if(!canUseReachBottom) return; //Wenn die Bottoming-Funktion nicht verfügbar ist, werden die Netzwerkanforderungsdaten nicht aufgerufen /* ------------------------- */
      this.getServerItems(Seite);
   },
   ServerItems: Funktion (pg) {
      /* ------------------------- */
        canUseReachBottom = false; //Bottom-Touch-Funktion schließen /* ------------------------- */
      var tar = dies;
      pg = pg? pg: 0;
      wx.showLoading({
         Titel: „Wird geladen …“,
      });
      wx.Anfrage({
         URL: "https://xxx.com/api/items/search",
         Daten: {Seite: pg},
         Methode: 'POST',
         Header: { 'Inhaltstyp': 'Anwendung/x-www-form-urlencoded' },
         Erfolg: Funktion (res) {
            if (res.data.status == 1) {//Es gibt neue Daten var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  Artikel: arr,
               });
               Seite++;
              /* ------------------------- */
                canUseReachBottom = true; //Es gibt neue Daten, die Bottoming-Funktion ist aktiviert und bereitet den nächsten Bottoming-Aufruf vor /* ------------------------- */
            } anders { 
               tar.setData({
                  Seitenende:true,
               })
            }

         },
         Fehler: Funktion (e) {
            konsole.log(e);
         },
         komplett: Funktion(c){
            wx.hideLoading();
         }
      })

   },