Element UI中v-infinite-scroll无限滚动组件使用详解

一、v-infinite-scroll无限滚动组件使用详解

1、v-infinite-scroll="load" //load无限滚动加载的方法
 2、infinite-scroll-disabled //是否禁用无限滚动加载
 3、infinite-scroll-delay //节流时延,单位为ms
 4、infinite-scroll-distance //触发加载的距离阈值,单位为px
 5、infinite-scroll-immediate //是否立即执行加载方法,以防初始状态下内容无法撑满容器。
 //默认情况下,infinite-scroll-disabled是false,因此如果组件使用无限滚动加载组件,即使在vue不进行加载方法的调用,组件也会调用该方法,因此如果需要控制的话,尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。

二、组件无限加载原因及解决方式

1、问题:使用无限加载的div没有设置高度导致无限加载

解决方案:
<div v-infinite-scroll="load" :infinite-scroll-disabled="isInfiniteScrollDisabled" style="margin-bottom: 20px;height:640px;overflow-y:auto" //style的设置非常关键,一定要设置height高度 >

在指令使用的div一定要限定高度(height:xxx; overflow-y:auto)load加载方法将在拉取底部时才会被执行。

2、问题:为什么在vue中并没有在任何生命周期中进行load方法的调用,直接就加载了方法?

解决方案:使用 :infinite-scroll-disabled="isInfiniteScrollDisabled“属性来进行控制。

3、代码demo演示

<template>
 <div class="vue-class-name">
 <div
 v-infinite-scroll="load"
 :infinite-scroll-disabled="isInfiniteScrollDisabled"
 style="margin-bottom: 20px;height:640px;overflow-y:auto"
 >
 <div
 v-for="item in dataList"
 :key="item.index"
 style="display: inline-block;margin:0px 10px 10px 0px"
 >
 <span>{{item}}</span>
 </div>
 <el-empty
 description="No Data"
 v-if="dataList.length == 0"
 style="height:650px;overflow-y:auto;text-align:center"
 ></el-empty>
 
 <!-- 这个div一定要放在使用指令的div里面-->
 <div align="center" v-if="dataList.length > 0"> 
 <div class="drawer-footer">
 <span v-if="pullStatus === $enum.STATUS.START">
 Pull up to load more
 </span>
 <span v-if="pullStatus === $enum.STATUS.LOADING">
 loading
 <i class="el-icon-loading"></i>
 </span>
 <span v-if="pullStatus === $enum.STATUS.NODATA">
 no more data
 </span>
 </div>
 </div>
 </div>
 </div>
</template>
<script>
export default {
 name: 'VueName',
 mixins: [],
 components: {},
 props: {},
 data: function() {
 return {
 pullStatus: this.$enum.STATUS.START,
 pageIndex: 1,
 pageSize: 20,
 dataList: [],
 isInfiniteScrollDisabled: false,
 };
 },
 computed: {},
 watch: {
 //事件监听:当刷新浏览器页面或者切换项目的时候进行方法调用
 projectSpaceId: function(value, oldValue) {
 this.dataList = [];
 this.pageIndex = 1;
 this.pullStatus = this.$enum.STATUS.START;
 this.getLoadMoreData();
 },
 },
 created() {},
 mounted() {
 //一进入页面进行方法调用
 this.getLoadMoreData();
 },
 methods: {
 getLoadMoreData() {
 if (this.pullStatus != this.$enum.STATUS.START) {
 return;
 }
 this.pullStatus = this.$enum.STATUS.LOADING;
 this.isInfiniteScrollDisabled = true;
 let params = {};//请求参数,可省略
 this.getData(params).then(resp => {
 if (data.length < this.pageSize ) {
 this.pullStatus = this.$enum.STATUS.NODATA;
 } else {
 this.pageIndex++;
 this.pullStatus = this.$enum.STATUS.START;
 }
 if (resp.data.length > 0) {
 this.dataList = this.dataList.concat(resp.data);//数组拼接,得到拼接后的数据
 }
 this.isInfiniteScrollDisabled = false;
 });
 },
 },
 beforeDestroy() {
 this.dataList = []; //清空数组
};
</script>
<style scoped></style>
//常量定义
export const STATUS= {
 START: 0, // 上拉加载
 LOADING: 1, // 加载中
 NODATA: 2, // 没有更多数据
};

三、总结

当然,这个组件还有很多可以优化的地方,比如:可以将下面这一段代码抽成公共组件,使用该组件的地方,只需要传当前的pullStatus状态即可。

<div class="drawer-footer">
 <span v-if="pullStatus === $enum.STATUS.START">
 Pull up to load more
 </span>
 <span v-if="pullStatus === $enum.STATUS.LOADING">
 loading
 <i class="el-icon-loading"></i>
 </span>
 <span v-if="pullStatus === $enum.STATUS.NODATA">
 no more data
 </span>
 </div>

同时,也可以封装成一个mixins,这样同一个项目,如果多处需要滚动分页,那么这样代码就会更加简洁和方便,下面我粘贴一下mixins里面的代码:

/** 
 * 页面无限滚动加载
*/
export default {
 name: "infiniteScrollMixins",
 data() {
 return {
 pullStatus: this.$enum.STATUS.START,
 pageIndex: 1,
 pageSize: 20,
 }
 },
 computed: {},
 created() {},
 methods: {
 loadMoreData() {
 if (this.pullStatus != this.$enum.STATUS.START) {
 return;
 }
 this.pullStatus = this.$enum.STATUS.LOADING;
 if(this.getLoadMoreData) {
 //使用该mixins的组件需要定义该方法
 this.getLoadMoreData();
 }
 },

 setPullStatus(data = []) {
 if (data.length < this.pageSize ) {
 this.pullStatus = this.$enum.STATUS.NODATA;
 } else {
 this.pageIndex++;
 this.pullStatus = this.$enum.STATUS.START;
 }
 }
 },
 beforeDestroy() {},
};

如何使用封装的mixins?

1、导入: import 名称 from ‘路径’;

2、声明: mixins: [mixins名称],

3、此时mixins中定义的data/methods/computed等,在该组件中都可以直接使用,且多个使用mixins的组件的各个变量是相互独立的,值的修改在组件中不会相互影响。(此处不理解可以去学习一下mixins的相关文档)

总结

作者:Country Programmer原文地址:https://blog.csdn.net/Subuprogrammer/article/details/126348736

%s 个评论

要回复文章请先登录注册