記錄一個(gè)van-list不斷onLoad加載的坑及解決
van-list不斷onLoad加載的坑
van-list 下拉的時(shí)候,不斷請(qǐng)求后臺(tái)加載數(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); ? ? ? })
首先說(shuō)下出現(xiàn)不斷加載的一種情況, 解決方法是設(shè)置:offset="20";
這是網(wǎng)上常說(shuō)的,然而并沒(méi)有什么卵用。。。
我這里出現(xiàn)不斷加載的原因是
this.list = [];
坑爹,不能清空,清空之后就會(huì)判斷沒(méi)填滿空間,就會(huì)不斷加載。。。。
van-list列表下拉加載更多onLoad事件
van-list是瀑布流滾動(dòng)加載,用于展示長(zhǎng)列表,當(dāng)列表即將滾動(dòng)到底部時(shí),會(huì)觸發(fā)事件并加載更多列表項(xiàng)。
引入
import Vue from 'vue'; import { List } from 'vant'; ? Vue.use(List);
頁(yè)面渲染
<van-list class="mylist" ? ? ?v-model="loading" ? ? ?:finished="finished" ? ? ?finished-text="沒(méi)有更多了" ? ? ?@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:"", ? ? }; ? }, }
方法實(shí)現(xiàn)
methods:{? ? ? ? ? async onLoad() { ? ? ? ? ? ? this.loading = true;//防止第一頁(yè)重復(fù)加載 ? ? ? ? ? ? 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(); ? ? ? ? }, ? ? }
重點(diǎn)總結(jié)
this.queryParams.pageNum = 1 //每次走完函數(shù),將當(dāng)前頁(yè)恢復(fù)至1,防止后面累加,導(dǎo)致點(diǎn)擊別的篩選條件時(shí)無(wú)效,返回finished-text this.finished = false; //同樣,也要將finished恢復(fù),否則,執(zhí)行別的篩選條件時(shí),會(huì)顯示finished-text,并且導(dǎo)致明明還有數(shù)據(jù),但是不會(huì)加載出來(lái).
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于vue+face-api.js實(shí)現(xiàn)前端人臉識(shí)別功能
基于face-api.js要實(shí)現(xiàn)人臉識(shí)別功能,首先要將自己需要的模型文件下載保存在靜態(tài)目錄下,可以通過(guò)cdn的方式在index.html中引入face-api.js,本文給大家介紹vue+face-api.js實(shí)現(xiàn)前端人臉識(shí)別功能,感興趣的朋友一起看看吧2023-12-12vue中的非父子間的通訊問(wèn)題簡(jiǎn)單的實(shí)例代碼
這篇文章主要介紹了vue中的非父子間的通訊問(wèn)題簡(jiǎn)單的實(shí)例代碼,需要的朋友可以參考下2017-07-07詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽(tīng)事件
本篇文章主要介紹了詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽(tīng)事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03Vue3?中?watch?與?watchEffect?區(qū)別及用法小結(jié)
這篇文章主要介紹了Vue3?中?watch?與?watchEffect?有什么區(qū)別?watch中需要指明監(jiān)視的屬性,也需要指明監(jiān)視的回調(diào),而watchEffect中不需要指明監(jiān)視的屬性,只需要指明監(jiān)視的回調(diào),回調(diào)函數(shù)中用到哪個(gè)屬性,就監(jiān)視哪個(gè)屬性,本文給大家詳細(xì)介紹,需要的朋友參考下2022-06-06vue cli 3.0通用打包配置代碼,不分一二級(jí)目錄
這篇文章主要介紹了vue cli 3.0通用打包配置代碼,不分一二級(jí)目錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09解決vue-router進(jìn)行build無(wú)法正常顯示路由頁(yè)面的問(wèn)題
下面小編就為大家分享一篇解決vue-router進(jìn)行build無(wú)法正常顯示路由頁(yè)面的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03