注意: vue-infinite-loading2.0 只能在 vue.js2.0 中使用. 如果你想在 Vue.js1.0 中使用, 请安装 vue-infinite-loading1.3 版本
如何安装
npm install vue-infinite-loading --save
导入方式
es6 模块导入方式
- import InfiniteLoading from 'vue-infinite-loading';
- export default {
- components: {InfiniteLoading},
- };
CommonJS 模块导入方式
- const InfiniteLoading = require('vue-infinite-loading');
- export default {
- components: {
- InfiniteLoading
- }
- };
其他方式
<script src="vue-infinite-loading.js"></script>
在页面中应用
直接在组件中声明
- components:{
- InfiniteLoading
- }
模板部分
- <infinite-loading @infinite="infiniteHandler">
- <span slot="no-more">
我们是有底线的
- </span>
- </infinite-loading>
js 部分
当滚动到底部时自动触发 infiniteHandler 事件
- infiniteHandler($state) {
- setTimeout(() = >{
- const temp = [];
- for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
- temp.push(i);
- }
- this.list = this.list.concat(temp);
- $state.loaded();
- $state.complete();
- },
- 1000);
- }
注意
如果还是使用
- this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
- this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
会出现警告, 告诉你已经修改为传参传入 $state 使用这个方法.
属性
distance: 这是滚动的临界值. 如果到滚动父元素的底部距离小于这个值, 那么 infiniteHandler 回调函数就会被调用.
<infinite-loading @infinite="infiniteHandler" distance="Number">
</infinite-loading>
spinner: 通过这个属性, 你可以选择一个你最喜爱旋转器作为加载动画.
- spinner="bubbles";
- 1,bubbles
- 2,circles
- 3,default
- 4,spiral
- 5,waveDots
- <infinite-loading @infinite="infiniteHandler" spinner="String">
- </infinite-loading>
direction: 如果你设置这个属性为 top, 那么这个组件将在你滚到顶部的时候, 调用 infiniteHandler 函数.
警告: 你必须在数据加载后, 手动地将滚动父元素的 scrollTop 设置为正确的值, 否则, 该组件会一次又一次调用 infiniteHandler 函数.
- direction="top"
- <infinite-loading @infinite="infiniteHandler" direction="String">
- </infinite-loading>
本文借鉴 https://www.jianshu.com/p/bfb5ca56b4fb.
来源: http://www.jianshu.com/p/7f60e5d7fb08