vue-infinite-scroll使用方法

实现下拉加载内容

安装

npm i vue-infinite-scroll -D
复制代码

在main.js入口文件里面引入

// 注册全局
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
 
//单独的组件里面使用
import infiniteScroll from 'vue-infinite-scroll'
new Vue({
  directives: {infiniteScroll}
}
复制代码

使用

复制代码到项目中

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>
复制代码

其中…部分可以替换成加载中提示语或加载中图片

在data中定义一个busy属性，对应的是html中infinite-scroll-disabled选项

data () {
    busy: false //是否正在加载过程中
  }
复制代码

在methods中定义一个loadMore方法，对应的是html中v-infinite-scroll选项，当滚动到距离底部指定位置时触发的方法

methods: {
    loadMore: function() {
      this.busy = true;

     //官方示例中延迟了1秒，防止滚动条滚动时的频繁请求数据
      setTimeout(() => {
        //这里请求接口去拿数据，实际应该是调用一个请求数据的方法
        this.busy = false;
      }, 1000);
    }
  }
复制代码

代码可以设置的属性

1. infinite-scroll-distance

指定滚动条距离底部多高时触发v-infinite-scroll指向的方法

2.infinite-scroll-disabled

等于true时代表正在执行加载，这时禁用滚动触发。

3. infinite-scroll-immediate-check

布尔值(默认值= true)。指令在绑定后立即检查，是否内容高度不足以填充页面容器。

4. infinite-scroll-listen-for-event

当vue实例触发事件时立即再次检查

5. infinite-scroll-throttle-delay

两次检查之间的时间间隔(默认值= 200)

后续 blog.csdn.net/thatway_wp/…