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

 更新时间:2023年01月18日 10:01:35   作者:易小花  
这篇文章主要介绍了vant van-list下拉加载更多onload事件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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;
           })
      }
  }

两个事情跳转:

第五步

解决遇到的坑

这里我讲一下我遇到的一些关于该组件的问题解决方法。

首先, onload在加载时只触发一次,页面向下滚动时,onload并不加载,你可以在获取数据的时候手动在前面加一个_this.loading = false。

其次,如果数据一次全加载完了,说明你表格渲染的高度没有固定,或者是高度被撑开了,所以才会导致数据会一次加载完毕。设置100%也无效,这时你要设置高度。

然后如果一直显示加载中,无法关闭,这时你要在获取数据里面做一个判断,判断数据是否已经全部获取,获取了就给_this.finished = true,即关闭加载。

最后&#xff0c;就是css样式问题,列表元素使用了float需要使用类名vant-clearfix清除float,否则会出现请求被多次触发的问题。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详细聊聊前端如何实现token无感刷新(refresh_token)

    详细聊聊前端如何实现token无感刷新(refresh_token)

    实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,下面这篇文章主要给大家介绍了关于前端如何实现token无感刷新(refresh_token)的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue使用Element的Tree树形控件实现拖动改变节点顺序方式

    vue使用Element的Tree树形控件实现拖动改变节点顺序方式

    这篇文章主要介绍了vue使用Element的Tree树形控件实现拖动改变节点顺序方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined

    ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefin

    这篇文章主要介绍了ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue多页面配置详情

    vue多页面配置详情

    这篇文章主要介绍了vue多页面配置,单页应用这个概念,是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里,我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,下面来看看详细内容,需要的朋友可以参考一下
    2021-11-11
  • Vue2.0使用过程常见的一些问题总结学习

    Vue2.0使用过程常见的一些问题总结学习

    本篇文章主要介绍了Vue2.0使用过程常见的一些问题总结学习,详细的介绍了使用中会遇到的各种错误,有兴趣的可以了解一下。
    2017-04-04
  • 浅谈Vue.use的使用

    浅谈Vue.use的使用

    这篇文章主要介绍了浅谈Vue.use的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue两个组件间值的传递或修改方式

    vue两个组件间值的传递或修改方式

    这篇文章主要介绍了vue两个组件间值的传递或修改的实现代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue3中v-model语法糖的三种写法详解

    Vue3中v-model语法糖的三种写法详解

    这篇文章主要为大家详细介绍了Vue3中v-model语法糖的三种写法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • Vue实例中生命周期created和mounted的区别详解

    Vue实例中生命周期created和mounted的区别详解

    这篇文章主要给大家介绍了关于Vue实例中生命周期created和mounted区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • Vue.JS入门教程之列表渲染

    Vue.JS入门教程之列表渲染

    这篇文章主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论