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

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

数据实现滚动至底部时，加载更多数据

在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
亿点小知识：这里我们要注意 v-infinite-scroll一定要放到父容器上，同时通过disabled来进行止住加载数据

<template>
  <ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-disabled='disabled'>
    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>
<script>
  export default {
    data () {
      return {
        count: 0,
        disabled:false
      }
    },
    methods: {
      load () {
        if(this.count >= 20){
        	this.disabled = true
        }else{
        	this.count += 2
        }
      }
    }
  }
</script>

以上就可以控制数据的加载 最多为20条数据

接下来我们在看一下有哪些属性可以更好的帮助我们开发

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

接下来看一段实战的代码：

通过disabled 控制
使用watch 侦听数据的变化
count记录当前是第几页
记得在页面初始的时候 初始化数据

<template>
  <ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-disabled='disabled'>
    <li v-for="i in dataList" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>
<script>
  export default {
    data () {
      return {
        count: 0,
        disabled:false,
        dataList:[]
      }
    },
   watch: {
	  () => this.dataList.length,
	  value => {
	    if (this.totalQuery== this.inheritData.length) {
	      this.disabled = true;
	    }
	  }
	}，
    methods: {
    	getData(){
    	 const data: any = await getList({page: this.count});
		  this.totalQuery= data.total;
		  if (this.totalQuery== this.dataList.length) {
		    this.disabled= true;
		  } else {
		    this.dataList= [...this.dataList, ...data?.data];
		    this.count += 1;
		    this.disabled= false;
		  }

    	},
      load () {
	      if (totalQuery!= this.dataList.length) {
			  this.getData();
		  } else {
		   this.disabled = true;
		  }
      }
    }
  }
</script>

以上就是对v-infinite-scroll无限滚动组件感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…