微信小程序scroll-view實(shí)現(xiàn)上拉加載數(shù)據(jù)重復(fù)的解決方法
微信小程序的 scroll-view 上拉加載更多的BUG(數(shù)據(jù)會(huì)多加載,甚至有重復(fù)數(shù)據(jù))。
問(wèn)題描述:上拉一次,會(huì)多次觸發(fā)觸底函數(shù) onReachBottom();換成自定義加載更多函數(shù), 例如 loadMore(), 問(wèn)題依舊存在。
生產(chǎn)環(huán)境:調(diào)試基礎(chǔ)庫(kù) 目前最新版本1.9.94 依舊存在這個(gè)問(wèn)題。
解決方法:加狀態(tài)控制變量,限制 觸底函數(shù)/加載更多函數(shù) 的觸發(fā)條件。
頁(yè)面上拉加載更多后,看下圖,有重復(fù)數(shù)據(jù)
通用前端wxml代碼 search.wxml
<!--pages/shop/search.wxml--> <scroll-view scroll-y="true" style="height:{{windowHeight}}px;" bindscrolltolower="onReachBottom"> <!-- 產(chǎn)品列表 --> <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'>銷(xiāo)量</text> {{item.sold_num}}</text> </view> </view> </view> </block> </view> <view wx:if="{{pageEnd==true}}" class='scrollEnd'>已顯示所有數(shù)據(jù)...</view> </scroll-view>
先看測(cè)試用例1 search.js(未修復(fù)BUG)
//pages/shop/public/search/search.js /* 有BUG的JS用例 */ const app = getApp(); var page = 0;//分頁(yè)標(biāo)簽 Page({ data: { pageEnd:false, //是否頁(yè)面底部 windowHeight: app.getWH(),//應(yīng)用程序高度 // 商品列表數(shù)組 items:[], }, /************************* 系統(tǒng)及頁(yè)面功能函數(shù) **************************/ //頁(yè)面加載 onLoad: function (options) { //第一次加載 this.getServerItems(page); }, // 觸底函數(shù)(上拉加載更多) onReachBottom: function () { this.getServerItems(page); }, /************************* 網(wǎng)絡(luò)請(qǐng)求 **************************/ /** * 獲取服務(wù)器商品列表 * @param {string} page 分頁(yè) 默認(rèn)0 */ getServerItems: function (pg) { var tar = this; //設(shè)置默認(rèn)值 pg = pg ? pg : 0; wx.showLoading({//顯示toast title: '加載中...', }); //網(wǎng)絡(luò)請(qǐng)求 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) {//網(wǎng)絡(luò)請(qǐng)求成功 if (res.data.status == 1) {//有新數(shù)據(jù) var tmpArr = res.data.data; arr = arr.concat(tmpArr); tar.setData({ items: arr, }); page++; } else {//res.data.status == 0 沒(méi)有新數(shù)據(jù)了 tar.setData({ pageEnd:true,//顯示頁(yè)底信息 }) } }, error: function (e) {//網(wǎng)絡(luò)請(qǐng)求失敗 console.log(e); }, complete: function(c){//網(wǎng)絡(luò)請(qǐng)求完成 wx.hideLoading();//隱藏toast } }) },
修復(fù)BUG,在上面 search.js 基礎(chǔ)上加上 觸底函數(shù)控制變量 canUseReachBottom 后的 search.js
//pages/shop/public/search/search.js /* 修復(fù)BUG后的JS用例 */ const app = getApp(); var page = 0; /* ------------------------- */ var canUseReachBottom = true;//觸底函數(shù)控制變量 /* ------------------------- */ Page({ data: { pageEnd:false, windowHeight: app.getWH(), items:[], }, onLoad: function (options) { this.getServerItems(page); }, // 觸底函數(shù)(上拉加載更多) onReachBottom: function () { /* ------------------------- */ if(!canUseReachBottom) return;//如果觸底函數(shù)不可用,則不調(diào)用網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù) /* ------------------------- */ this.getServerItems(page); }, ServerItems: function (pg) { /* ------------------------- */ canUseReachBottom = false;//觸底函數(shù)關(guān)閉 /* ------------------------- */ 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) {//有新數(shù)據(jù) var tmpArr = res.data.data; arr = arr.concat(tmpArr); tar.setData({ items: arr, }); page++; /* ------------------------- */ canUseReachBottom = true;//有新數(shù)據(jù),觸底函數(shù)開(kāi)啟,為下次觸底調(diào)用做準(zhǔn)備 /* ------------------------- */ } else { tar.setData({ pageEnd:true, }) } }, error: function (e) { console.log(e); }, complete: function(c){ wx.hideLoading(); } }) },
總結(jié):導(dǎo)致BUG的原因可能是因?yàn)?觸底函數(shù)觸發(fā)后,請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)->小程序渲染數(shù)據(jù)到前端,因?yàn)檫@兩個(gè)過(guò)程會(huì)比較耗時(shí),所以前端還沒(méi)來(lái)得及渲染完成,觸底函數(shù)判斷前端頁(yè)面還是在底部,再一次或者多次觸發(fā) 觸底函數(shù)。從而導(dǎo)致數(shù)據(jù)多次重復(fù)加載
通過(guò)看手機(jī)端小程序開(kāi)發(fā)版的vConsole也可以看到。上拉一次,連續(xù)觸發(fā)了3次網(wǎng)絡(luò)請(qǐng)求request begin,然后服務(wù)器才延時(shí)逐一返回success結(jié)果。如圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決html input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決html input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二):隊(duì)列
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(二):隊(duì)列,隊(duì)列是只允許在一端進(jìn)行插入操作,另一個(gè)進(jìn)行刪除操作的線性表,隊(duì)列是一種先進(jìn)先出(First-In-First-Out,F(xiàn)IFO)的數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2015-06-06微信小程使用swiper組件實(shí)現(xiàn)圖片輪播切換顯示功能【附源碼下載】
這篇文章主要介紹了微信小程使用swiper組件實(shí)現(xiàn)圖片輪播切換顯示功能,涉及swiper組件相關(guān)屬性使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12對(duì)象無(wú)length屬性時(shí)IE6/IE7中無(wú)法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike)
對(duì)象無(wú)length屬性時(shí)IE6/7中無(wú)法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike) 的解決方法,需要的朋友可以參考下。2011-07-07HTML5之WebSocket入門(mén)3 -通信模型socket.io
socket.io能為程序員提供客戶端和服務(wù)端一致的編程體驗(yàn),socket.io支持任何的瀏覽器,任何的Mobile設(shè)備。下面通過(guò)本篇文章給大家講解HTML5之WebSocket入門(mén)3 -通信模型socket.io,需要的朋友可以參考下2015-08-08ES6數(shù)組與對(duì)象的解構(gòu)賦值詳解
這篇文章主要介紹了ES6數(shù)組與對(duì)象的解構(gòu)賦值,結(jié)合實(shí)例形式詳細(xì)分析了ES6中數(shù)組與對(duì)象的解構(gòu)賦值原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06