微信小程序scroll-view實現上拉加載數據重復的解決方法

更新時間：2021年08月16日 17:09:56 作者：武當山道士

這篇文章主要為大家詳細介紹了微信小程序scroll-view實現上拉加載數據重復的解決方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信小程序的 scroll-view 上拉加載更多的BUG（數據會多加載，甚至有重復數據）。

問題描述：上拉一次，會多次觸發(fā)觸底函數 onReachBottom()；換成自定義加載更多函數, 例如 loadMore(), 問題依舊存在。

生產環(huán)境：調試基礎庫目前最新版本1.9.94 依舊存在這個問題。

解決方法：加狀態(tài)控制變量，限制觸底函數/加載更多函數的觸發(fā)條件。

頁面上拉加載更多后，看下圖，有重復數據

通用前端wxml代碼 search.wxml

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

      <!-- 產品列表  -->
      <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'>銷量</text> {{item.sold_num}}</text> 
                  </view>
               </view>
            </view> 
         </block> 
      </view>
      <view wx:if="{{pageEnd==true}}" class='scrollEnd'>已顯示所有數據...</view>
</scroll-view>

先看測試用例1 search.js(未修復BUG)

//pages/shop/public/search/search.js
/* 有BUG的JS用例 */

const app = getApp();
var page = 0;//分頁標簽
Page({
   data: {
      pageEnd:false, //是否頁面底部
      windowHeight: app.getWH(),//應用程序高度
      // 商品列表數組
      items:[],
   },

   /************************* 系統(tǒng)及頁面功能函數  **************************/
   //頁面加載
   onLoad: function (options) {
      //第一次加載
      this.getServerItems(page);
   },
   // 觸底函數(上拉加載更多)
   onReachBottom: function () {
      this.getServerItems(page);
   },

   /************************* 網絡請求  **************************/
   /**
    * 獲取服務器商品列表
    * @param {string} page       分頁 默認0
    */
   getServerItems: function (pg) {
      var tar = this;
      //設置默認值
      pg = pg ? pg : 0;
      wx.showLoading({//顯示toast
         title: '加載中...',
      });
      //網絡請求
      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) {//有新數據
               var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  items: arr,
               });
               page++;

            } else {//res.data.status == 0 沒有新數據了
               tar.setData({
                  pageEnd:true,//顯示頁底信息
               })
            }

         },
         error: function (e) {//網絡請求失敗
            console.log(e);
         },
         complete: function(c){//網絡請求完成
            wx.hideLoading();//隱藏toast
         }
      })

   },

修復BUG，在上面 search.js 基礎上加上觸底函數控制變量 canUseReachBottom 后的 search.js

//pages/shop/public/search/search.js
/* 修復BUG后的JS用例 */

const app = getApp();
var page = 0;
/* ------------------------- */
var canUseReachBottom = true;//觸底函數控制變量
/* ------------------------- */
Page({
   data: {
      pageEnd:false, 
      windowHeight: app.getWH(),
       items:[],
   },
   onLoad: function (options) {
      this.getServerItems(page);
   },
   // 觸底函數(上拉加載更多)
   onReachBottom: function () {
      /* ------------------------- */
        if(!canUseReachBottom) return;//如果觸底函數不可用，則不調用網絡請求數據
      /* ------------------------- */
      this.getServerItems(page);
   },
   ServerItems: function (pg) {
      /* ------------------------- */
        canUseReachBottom = false;//觸底函數關閉
      /* ------------------------- */
      var tar = this;
      pg = pg ? pg : 0;
      wx.showLoading({
         title: '加載中...',
      });
      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) {//有新數據
               var tmpArr = res.data.data;
               arr = arr.concat(tmpArr);
               tar.setData({
                  items: arr,
               });
               page++;
              /* ------------------------- */
                canUseReachBottom = true;//有新數據，觸底函數開啟，為下次觸底調用做準備
              /* ------------------------- */
            } else { 
               tar.setData({
                  pageEnd:true,
               })
            }

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

   },

總結：導致BUG的原因可能是因為觸底函數觸發(fā)后，請求網絡數據->小程序渲染數據到前端，因為這兩個過程會比較耗時，所以前端還沒來得及渲染完成，觸底函數判斷前端頁面還是在底部，再一次或者多次觸發(fā) 觸底函數。從而導致數據多次重復加載

通過看手機端小程序開發(fā)版的vConsole也可以看到。上拉一次，連續(xù)觸發(fā)了3次網絡請求request begin，然后服務器才延時逐一返回success結果。如圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

基于layPage插件實現兩種分頁方式淺析
這篇文章主要為大家詳細介紹了基于layPage插件實現兩種分頁方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
Javascript數組的?forEach?方法詳細介紹
這篇文章主要介紹了Javascript數組的forEach方法詳細介紹,文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-09-09
javascript實現的字符串轉換成數組操作示例
這篇文章主要介紹了javascript實現的字符串轉換成數組操作,涉及javascript字符串與數組相互轉換、以及數組反轉相關操作技巧,需要的朋友可以參考下
2019-06-06
JSON創(chuàng)建鍵值對（key是中文或者數字）方式詳解
這篇文章主要介紹了JSON創(chuàng)建鍵值對（key是中文或者數字）方式詳解,需要的朋友可以參考下
2017-08-08
這篇文章主要介紹了微信小程序開發(fā)返回上一級頁面并刷新操作,結合實例形式詳細分析了微信小程序返回上一級頁面并刷新操作方法技巧與相關注意事項,需要的朋友可以參考下
2020-06-06