快捷導(dǎo)航

vant van-list下拉加載更多onload事件問題

更新時(shí)間：2023年01月18日 10:01:35 作者：易小花

這篇文章主要介紹了vant van-list下拉加載更多onload事件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vant van-list下拉加載更多onload事件

問題描述

van-list編寫下拉加載更多，利用van-list自帶的下拉加載事件@load="onLoad"，但是發(fā)現(xiàn)有次數(shù)限制，仍有部分條件下無(wú)法下拉加載更多。

后來(lái)發(fā)現(xiàn)原因，執(zhí)行完，之后finished恢復(fù)false，同時(shí)將當(dāng)前頁(yè)恢復(fù)為1，不寫的話，代碼不會(huì)自己恢復(fù)，因?yàn)檫@些參數(shù)是全局變量，所以會(huì)保留最后執(zhí)行之后的結(jié)果。

所以，在代碼執(zhí)行前要做一個(gè)恢復(fù)。細(xì)節(jié)很重要，因?yàn)檫@個(gè)細(xì)節(jié)，耽誤了很久時(shí)間。

this.currentPage = 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).

主要代碼如下

<van-list
	v-model="loading"
	:finished="finished"
	finished-text="我是有底線的~"
	@load="onLoad">//list自帶的下拉刷新事件
	<van-row
		v-for="(item,key) of Array"
		:key="key"
   </van-row>//循環(huán)，顯示列表
</van-list>

selType(type) {//從前端的點(diǎn)擊事件獲得type
	this.selectedType = type;
	console.log(this.selectedType);
	this.currentPage = 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).
	this.onLoad();
},
onLoad(){
	this.search();
}

search() {//調(diào)用查詢的接口
	let params = {
		type: this.selectedType, 
		index: this.currentPage,//頁(yè)數(shù)
		size: this.pageSize,//每頁(yè)個(gè)數(shù)
	}
.....（接口）(params).then(res => {
	console.log(res);
    this.dataTotal = res.total;
    //進(jìn)行判斷
	if(this.dataTotal <= this.pageSize){
		this.Array = res.data.list;
		console.log(this.Array);
	}else{
		this.currentPage++;
		let arr = res.data.data.list;
		this.Array = this.Array.concat(arr);
	};
	// 加載狀態(tài)結(jié)束
	this.loading = false;
	// 數(shù)據(jù)全部加載完成
	if (this.Array.length >= this.dataTotal) {
		this.finished = true;//結(jié)束，顯示我也是有底線的
	};
    });
}

vant van-list的使用及一些坑的解決

第一步

要使用vant組件，安裝好vant，npm i vant -S

第二步

在你要用到的地方j(luò)s中引入，或者在src/main.js里面引入

import Vue from ‘vue‘;
import { List } from ‘vant‘;

Vue.use(List);

這里我引入的地方是我要用到的js文件中

第三步

在template中引用

第四步

js中重要代碼

data(){
    return{
      content_list: [],
      	loading: false,//加載狀態(tài)
      	finished: false,//是否加載
      	count_page: 1,//加載頁(yè)數(shù)
　　　	count_num: 4//每頁(yè)限制條數(shù)
    }
 },
  methods:{
     list_onload_more: function () {
          var _this = this;
          _this.count_page += 1;
          // 請(qǐng)求數(shù)據(jù)
          _this.get_course_list();
      }
      ，get_course_list:function(){
      	   var _this = this;
		   var params ={};
           params.page = _this.count_page;
           params.num = _this.count_num;
           index_rpc.get_collection_course(params,function (data) {
               if(data.error_code == 0) {
                   var item = data.data || [];
                   _this.count = data.count;
                   if (params.count_page == 1){
                       _this.content_list = [];
                   }
                   item.forEach(function(val) {
                       _this.content_list.push(val);
                   })
                   //這里是用于判斷什么時(shí)候所有數(shù)據(jù)加載完畢，然后進(jìn)行是否進(jìn)行加載關(guān)閉
                   if(_this.count_num * _this.count_page >= _this.count) {
                       _this.finished = true;
                   }else {
                       _this.finished = false;
                   }
               }else{
                   _this.count = 0;
                   _this.content_list = [];
                   _this.finished = true;
               }
               //最后數(shù)據(jù)加載完后不要忘記將loading改為false
               _this.loading = false;
           })
      }
  }

兩個(gè)事情跳轉(zhuǎn)：