您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“van-list不斷onLoad加載怎么解決”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
van-list 下拉的時候,不斷請求后臺加載數(shù)據(jù),真的是坑。。。。
this.$http.post(url, params).then(function (res) { this.list = []; if (res.data.data.length == 0) { that.finished = true } else { that.list = [...that.list , ...res.data.data] } that.loading = false }).catch((reason) => { Toast.fail("查詢列表數(shù)據(jù)!" + reason); })
首先說下出現(xiàn)不斷加載的一種情況, 解決方法是設置:offset="20";
這是網(wǎng)上常說的,然而并沒有什么卵用。。。
this.list = [];
坑爹,不能清空,清空之后就會判斷沒填滿空間,就會不斷加載。。。。
van-list是瀑布流滾動加載,用于展示長列表,當列表即將滾動到底部時,會觸發(fā)事件并加載更多列表項。
引入
import Vue from 'vue'; import { List } from 'vant'; Vue.use(List);
頁面渲染
<van-list class="mylist" v-model="loading" :finished="finished" finished-text="沒有更多了" @load="onLoad" > <van-cell v-for="(item,index) in list" :key="index" class="mycell"> {{item.name}} </van-cell> </van-list>
數(shù)據(jù)定義
export default { data() { return { list: [], loading: false, finished: false, total: 0, // 查詢參數(shù) queryParams: { pageNum: 0, pageSize: 6, deptname: null, username: null, createTime: null, jigou: null, }, defaultdept:null, keyWords:"", }; }, }
方法實現(xiàn)
methods:{ async onLoad() { this.loading = true;//防止第一頁重復加載 this.queryParams.jigou = this.defaultdept listWuzicount(this.queryParams).then(res => { this.total = res.total; if(this.total <= this.queryParams.pageSize){ this.list= res.rows }else{ this.queryParams.pageNum++; let arr = res.rows; this.list= this.list.concat(arr); }; // 加載狀態(tài)結(jié)束 this.loading = false; // 數(shù)據(jù)全部加載完成 if (this.list.length >= this.total) { this.finished = true; } }) }, }, watch:{ defaultdept(val){ this.queryParams.jigou = val this.list= [] this.queryParams.pageNum = 1 this.finished = false; this.onLoad(); }, keyWords(val){ this.queryParams.deptname = val this.list= [] this.queryParams.pageNum = 1 this.finished = false; this.onLoad(); }, }
this.queryParams.pageNum = 1 //每次走完函數(shù),將當前頁恢復至1,防止后面累加,導致點擊別的篩選條件時無效,返回finished-text this.finished = false; //同樣,也要將finished恢復,否則,執(zhí)行別的篩選條件時,會顯示finished-text,并且導致明明還有數(shù)據(jù),但是不會加載出來.
“van-list不斷onLoad加載怎么解決”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。