Vue2 ElementUI InfiniteScroll 无限滚动

ElementUI InfiniteScroll 无限滚动

使用场景

在处理无限加载的数据列表时,无论是 PC Web 端还是 Mobile 移动端,皆会涉及数据滚动加载问题。首先无限加载的功能需要检测到数据展示区域滚动到某一个区域或者高度才会触发事件加载机制,从而触发下一页数据的加载,直至当前数据全部加载完成,再次滚动到指定区域时,依据加载完成状态做数据的拦截处理。

安装插件

shell 复制代码
yarn add vue-infinite-scroll --save
// or
npm install vue-infinite-scroll --save
// or
pnpm install vue-infinite-scroll --save
// or
bun install vue-infinite-scroll --save
  • 提示

具体使用方法请查看 npmjs write-excel-file;npmmirror 访问地址:write-excel-file

引用插件

javascript 复制代码
// 全局引用
import infiniteScroll from "vue-infinite-scroll";
Vue.use(infiniteScroll);

// 局部引用
import infiniteScroll from "vue-infinite-scroll";
new Vue({
	directives: { infiniteScroll }
});

属性配置

  • elementUI InfiniteScroll 文档
参数 类型 默认值 可选值 是否必填 备注
infinite-scroll-disabled Boolean false true/false 禁用滚动加载
infinite-scroll-distance Number 0 - 滚动距离
infinite-scroll-immediate Boolean true true/false 滚动加载时是否立即执行
infinite-scroll-delay String bottom top/bottom 节流时延,单位为 ms
  • vue-infinite-scroll 文档
参数 类型 默认值 可选值 是否必填 备注
infinite-scroll-disabled Boolean false true/false 禁用滚动加载
infinite-scroll-distance Number 0 - 滚动距离
nfinite-scroll-immediate-check Boolean true true/false 在绑定容器后立即检查,若高度不够,无法填满可滚动容器
infinite-scroll-delay String bottom top/bottom 节流时延,单位为 ms
infinite-scroll-listen-for-event Function infinite scroll 会在 Vue 实例中发出事件时再次检查。

代码实例

html 复制代码
<template>
	<article v-load="loading">
		<ul v-infinite-scroll="dataLoad" infinite-scroll-disabled="noMore">
			<li v-for="item in list" :key="item.value">{{ item.name }}</li>
		</ul>
	</article>
</template>

<script>
	export default({
		data(){
			loading: false,
			list: [],
			pageNo: 0,
			pageTotal: 0
		},
		computed:{
			noMore(){
				return this.pageNo ? this.pageTotal > this.list.length : false;
			}
		},
		methods:{
			// 数据加载
			dataLoad(){
				this.loading = true;
				this.pageNo++;
				getMoreData(this.pageNo).then(res => {
					let {list, total} = res.data;
					if(this.pageNo === 1){
						this.pageTotal = total || 0;
						if(this.list.length) this.list.splice(0);
					}
					this.list.push(...(list || []));
				})
				.catch(err => {
					console.log('error', err);
				})
				.finally(() => {
					this.loading = false;
				});
			}
		}
	})
</script>

CSS 样式

css 复制代码
article {
	height: 400px;
	overflow: hidden;
	overflow-y: auto;
}

注意事项:

  • 「infinite-scroll-disabled」:禁用滚动加载,默认为 false ,当为 true 时,滚动加载将不会触发;
  • 加载完成数据需要禁用滚动加载;此处传值为 Boolean 类型,但此处不能使用 vuev-bind 进行数据绑定,否则无效;
  • 包裹滚动加载数据的区域,需要限制高度!!!
相关推荐
LFly_ice5 小时前
学习React-11-useDeferredValue
前端·学习·react.js
ホロHoro5 小时前
学习笔记:JavaScript(4)——DOM节点
javascript·笔记·学习
亮子AI5 小时前
【npm】npm 包更新工具 npm-check-updates (ncu)
前端·npm·node.js
信看5 小时前
实用 html 小工具
前端·css·html
Yvonne爱编码5 小时前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
王源骏5 小时前
Laya使用VideoNode动态加载视频,可以自定义播放视频此处以及位置
前端
一只小风华~5 小时前
Vue: ref、reactive、shallowRef、shallowReactive
前端·javascript·vue.js
阿杆6 小时前
文心快码 3.5S 发布!实测插件开发,Architect 模式令人惊艳
前端·后端·文心快码
文心快码BaiduComate6 小时前
我用Comate搭建「公园找搭子」神器,再也不孤单啦~
前端·后端·微信小程序
全栈技术负责人6 小时前
前端全链路质量监控体系建设与实践分享
前端·系统架构·前端框架