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

2023-07-11 1033

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>