vant van-list下拉加载更多onload事件问题_Vue.js

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

问题描述

van-list编写下拉加载更多，利用van-list自带的下拉加载事件@load="onload"，但是发现有次数限制，仍有部分条件下无法下拉加载更多。

后来发现原因，执行完，之后finished恢复false，同时将当前页恢复为1，不写的话，代码不会自己恢复，因为这些参数是全局变量，所以会保留最后执行之后的结果。

所以，在代码执行前要做一个恢复。细节很重要，因为这个细节，耽误了很久时间。

this.currentpage = 1;
//每次走完函数，将当前页恢复至1，防止后面累加，导致点击别的筛选条件时无效，返回finished-text
this.finished = false;
//同样，也要将finished恢复，否则，执行别的筛选条件时，会显示finished-text,并且导致明明还有数据,但是不会加载出来.

主要代码如下

<van-list
	v-model="loading"
	:finished="finished"
	finished-text="我是有底线的~"
	@load="onload">//list自带的下拉刷新事件
	<van-row
		v-for="(item,key) of array"
		:key="key"
   </van-row>//循环，显示列表
</van-list>

seltype(type) {//从前端的点击事件获得type
	this.selectedtype = type;
	console.log(this.selectedtype);
	this.currentpage = 1;
	//每次走完函数，将当前页恢复至1，防止后面累加，导致点击别的筛选条件时无效，返回finished-text
	this.finished = false;
	//同样，也要将finished恢复，否则，执行别的筛选条件时，会显示finished-text,并且导致明明还有数据,但是不会加载出来.
	this.onload();
},
onload(){
	this.search();
}

search() {//调用查询的接口
	let params = {
		type: this.selectedtype, 
		index: this.currentpage,//页数
		size: this.pagesize,//每页个数
	}
.....（接口）(params).then(res => {
	console.log(res);
    this.datatotal = res.total;
    //进行判断
	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);
	};
	// 加载状态结束
	this.loading = false;
	// 数据全部加载完成
	if (this.array.length >= this.datatotal) {
		this.finished = true;//结束，显示我也是有底线的
	};
    });
}

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

第一步

要使用vant组件，安装好vant，npm i vant -s

第二步

在你要用到的地方js中引入，或者在src/main.js里面引入

import vue from ‘vue‘;
import { list } from ‘vant‘;

vue.use(list);

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

第三步

在template中引用

第四步

js中重要代码

data(){
    return{
      content_list: [],
      	loading: false,//加载状态
      	finished: false,//是否加载
      	count_page: 1,//加载页数
　　　	count_num: 4//每页限制条数
    }
 },
  methods:{
     list_onload_more: function () {
          var _this = this;
          _this.count_page += 1;
          // 请求数据
          _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);
                   })
                   //这里是用于判断什么时候所有数据加载完毕，然后进行是否进行加载关闭
                   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;
               }
               //最后数据加载完后不要忘记将loading改为false
               _this.loading = false;
           })
      }
  }

两个事情跳转：