您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“scroll-view怎么解決上拉加載數(shù)據(jù)重復(fù)的問(wèn)題”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
問(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" 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'>銷量</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é)果。如圖:
“scroll-view怎么解決上拉加載數(shù)據(jù)重復(fù)的問(wèn)題”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。