infinity-scroll-vue3

infinite-scroll(infinity-scroll)

抽离自element-plus的vue3无限加载指令，用法同element-pluas/infinity-scroll

See infinity-scroll.

Attributes

参数	说明	类型	可选值	默认值
infinite-scroll-disabled	是否禁用	boolean	-	false
infinite-scroll-delay	节流时延，单位为ms	number	-	200
infinite-scroll-distance	触发加载的距离阈值，单位为px	number	-	50
infinite-scroll-immediate	是否立即执行加载方法，以防初始状态下内容无法撑满容器。	boolean	-	true

Example

<template>
  <div class="infinite-list-wrapper" style="overflow:auto;height:100px">
    <ul
      class="list"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled">
      <li v-for="i in count" class="list-item" :key="i">{{ i }}</li>
    </ul>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore&&!loading">没有更多了</p>
  </div>
</template>

  import InfiniteScroll from 'infinity-scroll-vue3'
  import { defineComponent, ref, computed } from 'vue'

  export default defineComponent({
    directives: {
      InfiniteScroll
    },
    setup() {
      const count = ref(40);
      const loading = ref(false);
      const noMore = computed(() => count.value >= 200);
      const disabled = computed(() => loading.value || noMore.value)
      const load = () => {
        loading.value = true;
        setTimeout(() => {
          count.value += 10
          loading.value = false
        }, 2000)
      }
      return {
        count,
        loading,
        noMore,
        disabled,
        load
      }
    }
  })