Element UI - v-infinite-scroll无限滚动组件

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

 1、v-infinite-scroll="load" //load无限滚动加载的方法2、infinite-scroll-disabled //是否禁用无限滚动加载3、infinite-scroll-delay //节流时延，单位为ms4、infinite-scroll-distance //触发加载的距离阈值，单位为px5、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"><divv-infinite-scroll="load":infinite-scroll-disabled="isInfiniteScrollDisabled"style="margin-bottom: 20px;height:640px;overflow-y:auto"><divv-for="item in dataList":key="item.index"style="display: inline-block;margin:0px 10px 10px 0px"><span>{{item}}</span></div><el-emptydescription="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的相关文档）

Element UI - v-infinite-scroll无限滚动组件相关推荐

Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
解决Element的 InfiniteScroll 无限滚动组件报错
问题: 使用Element的 InfiniteScroll 无限滚动组件,代码正常,但是控制台还是会有报错: vue.esm.js?efeb:628 [Vue warn]: Error in dire ...
使用Element的 InfiniteScroll 无限滚动组件报错
一.问题描述在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute 'observe' on 'MutationOb ...
【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效的解决方案
ElementUI 官网 InfiniteScroll 使用:https://element.eleme.cn/#/zh-CN/component/infiniteScroll 首先先叙述一下需求,说 ...
深入Flutter（四） Infinite scrolling -- 无限滚动
文章系列深入Flutter(一) 积极推进"组合"方式深入Flutter(二) 线性时间复杂度的 build 和 layout 深入Flutter(三) Element树和Re ...
jquery插件（二）：Infinite Scroll–无限分页
一.前言现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个" ...
vue-infinite-scroll无限滚动组件
该组件主要用于滚动到底部后自动触发v-infinite-scroll绑定的方法,通过该方法来请求新数据然后渲染页面,实现无限滚动的效果.如果是element-plus 的项目,可以直接使用v-infi ...
php jsonp实例 mip无限滚动组件接口注意事项
在改造mip的过程中,很多同学遇到这样一个问题.mip无限滚动问题异步请求数据接口(仅支持 JSONP 请求) 异步请求接口需要规范 callback 为 'callback' 那么什么是JSONP ...
InfiniteScroll 无限滚动组件的使用
项目场景: 在无限加载数据时,又不想把所有的数据加载完成,借助分页的思想将数据加载出来问题描述及解决方案,案例 1.load被无限加载原因:和html的标签样式有关,如果初始时加载的数据高度没有填 ...

Element UI - v-infinite-scroll无限滚动组件

Element UI - v-infinite-scroll无限滚动组件相关推荐

最新文章

热门文章