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 类型,但此处不能使用 vue 的 v-bind 进行数据绑定,否则无效;
- 包裹滚动加载数据的区域,需要限制高度!!!