微信小程序scroll-view實現上拉加載數據重復的解決方法
微信小程序的 scroll-view 上拉加載更多的BUG（數據會多加載，甚至有重復數據）。
問題描述：上拉一次，會多次觸發觸底函數 onReachBottom()；換成自定義加載更多函數, 例如 loadMore(), 問題依舊存在。
生產環境：調試基礎庫 目前最新版本1.9.94 依舊存在這個問題。
解決方法：加狀態控制變量，限制 觸底函數/加載更多函數 的觸發條件。
頁面上拉加載更多後，看下圖，有重復數據
通用前端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:[],
},
/************************* 系統及頁面功能函數 **************************/
//頁面加載
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的原因可能是因為 觸底函數觸發後，請求網絡數據->小程序渲染數據到前端，因為這兩個過程會比較耗時，所以前端還沒來得及渲染完成，觸底函數判斷前端頁面還是在底部，再一次或者多次觸發 觸底函數。從而導致數據多次重復加載
通過看手機端小程序開發版的vConsole也可以看到。上拉一次，連續觸發瞭3次網絡請求request begin，然後服務器才延時逐一返回success結果。如圖：
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。