欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

記錄一個(gè)van-list不斷onLoad加載的坑及解決

 更新時(shí)間:2022年04月25日 14:19:54   作者:七八月的天空  
這篇文章主要介紹了記錄一個(gè)van-list不斷onLoad加載的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)文章

最新評(píng)論