使用vue-infinite-scroll实现无限滚动

今天在移动端项目中遇见一个需求，需要数据无限滚动。在这里总结一下使用心得

首先引入：

 npm install vue-infinite-scroll --save  

在vue中的main.js中引入：

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

 

在代码中使用：

 上面代码效果为：当滚动到数据底部距离页面底部还有20px时，触发loadMore回调函数，一秒过后加载两个数据

v-infinite-scroll="loadMore"表示回调函数是loadMore;infinite-scroll-disabled="loading"表示由变量loading决定是否执行loadMore. false则执行loadMore，true则不执行。infinite-scroll-distance="20"这里20决定了页面滚动到离页尾多少像素的时候触发回调函数loadMore，20是像素值。通常我们会在页尾做一个几十像素高的“正在加载中...”,或者放一个加载图标。

效果图：

当从服务器拿去数据时，将回调loadMore的setTimeout换成ajax请求