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

<!--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>

//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
         }
      })

   },

//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();
         }
      })

   },