我的博客
开发记录
前端笔记
前端文档
我的博客
开发记录
前端笔记
前端文档

ElementUI InfiniteScroll 无限滚动

预计阅读时间: 3 分钟

使用场景

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

安装插件

代码示例
1yarn add vue-infinite-scroll --save
2// or
3npm install vue-infinite-scroll --save
4// or
5pnpm install vue-infinite-scroll --save
6// or
7bun install vue-infinite-scroll --save
提示

  具体使用方法请查看 npmjs vue-infinite-scroll；npmmirror 访问地址：vue-infinite-scroll

引用插件

代码示例
1// 全局引用
2import infiniteScroll from "vue-infinite-scroll";
3Vue.use(infiniteScroll);
4
5// 局部引用
6import infiniteScroll from "vue-infinite-scroll";
7new Vue({
8	directives: { infiniteScroll }
9});

属性配置

  • elementUI InfiniteScroll 文档
参数类型默认值可选值是否必填备注
infinite-scroll-disabledBooleanfalsetrue/false否禁用滚动加载
infinite-scroll-distanceNumber0-否滚动距离
infinite-scroll-immediateBooleantruetrue/false否滚动加载时是否立即执行
infinite-scroll-delayStringbottomtop/bottom否节流时延，单位为 ms
  • vue-infinite-scroll 文档
参数类型默认值可选值是否必填备注
infinite-scroll-disabledBooleanfalsetrue/false否禁用滚动加载
infinite-scroll-distanceNumber0-否滚动距离
nfinite-scroll-immediate-checkBooleantruetrue/false否在绑定容器后立即检查，若高度不够，无法填满可滚动容器
infinite-scroll-delayStringbottomtop/bottom否节流时延，单位为 ms
infinite-scroll-listen-for-eventFunction否infinite scroll 会在 Vue 实例中发出事件时再次检查。

代码实例

代码示例
1<template>
2	<article v-load="loading">
3		<ul v-infinite-scroll="dataLoad" infinite-scroll-disabled="noMore">
4			<li v-for="item in list" :key="item.value">{{ item.name }}</li>
5		</ul>
6	</article>
7</template>
8
9<script>
10	export default({
11		data(){
12			loading: false,
13			list: [],
14			pageNo: 0,
15			pageTotal: 0
16		},
17		computed:{
18			noMore(){
19				return this.pageNo ? this.pageTotal > this.list.length : false;
20			}
21		},
22		methods:{
23			// 数据加载
24			dataLoad(){
25				this.loading = true;
26				this.pageNo++;
27				getMoreData(this.pageNo).then(res => {
28					let {list, total} = res.data;
29					if(this.pageNo === 1){
30						this.pageTotal = total || 0;
31						if(this.list.length) this.list.splice(0);
32					}
33					this.list.push(...(list || []));
34				})
35				.catch(err => {
36					console.log('error', err);
37				})
38				.finally(() => {
39					this.loading = false;
40				});
41			}
42		}
43	})
44</script>

CSS 样式

代码示例
1article {
2	height: 400px;
3	overflow: hidden;
4	overflow-y: auto;
5}
注意事项：
  • 「infinite-scroll-disabled」：禁用滚动加载，默认为 false，当为 true 时，滚动加载将不会触发；
  • 加载完成数据需要禁用滚动加载；此处传值为 Boolean 类型，但此处不能使用 vue 的 v-bind 进行数据绑定，否则无效；
  • 包裹滚动加载数据的区域，需要限制高度！！!