Vue3 列表无限滚动vue3-infinite-scroll

vue3-infinite-scroll-good

简介 (introduce)

vue-infinite-scroll的vue3版本,所有用法和vue-infinite-scroll一致。
vue3 version of vue-infinite-scroll. All usages are consistent with vue-infinite-scroll

其代码也是基于它做了简单修改，并修复了一些bug，比如重复两次请求等问题。
The code is also based on it, made simple modifications, and fixed some bugs, such as repeated requests twice.

 示例 (Example)

API

参数                                              说明                                                      类型          默认值   
infinite-scroll-throttle-delay           滚动延迟                                               number     200    
infinite-scroll-disabled                  是否禁止                                                boolean    false    
infinite-scroll-distance                  滚动条距离底部的距离                           number    0    
infinite-scroll-immediate-check    是否立即触发滚动                                  boolean    true    
infinite-scroll-watch-disabled       与infinite-scroll-disabled绑定的对应值    string       null    
 

安装 (install)

yarn add vue3-infinite-scroll-good

使用 (use)

注意：在指令使用的元素一定要限定高度（height：xxx; overflow-y:auto），这样滚动条触底绑定的事件才能正常执行。

**1.在使用的时候要给外部大盒子加个overflow: auto;**不然会疯狂报错

// 全局注册 mian.js
import infiniteScroll from 'vue3-infinite-scroll-good'
createApp(App).use(infiniteScroll).mount('#app');

// 组件使用
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>
var count = 0;

new Vue({
  el: '#app',
  data: {
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
});