引言
在 Web 中，无限加载是必需的一项功能，大部分流行的插件都是基于 jQuery 的，好在找到一个 vue-infinite-scroll 插件。于是开始了 vue-infinite-scroll 的踩坑。
1.安装
npm install vue-infinite-scroll --save
2.载入
在 main.js 文件中
// 无限加载
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
3.使用
<div v-infinite-scroll="loadMore"
infinite-scroll-throttle-delay="500"
infinite-scroll-disabled="busy"
immediate-check="false"
infinite-scroll-distance="50">
<ul>
<li v-for="(item, key) in list" :key="key">{{item}}</li>
</ul>
</div>
data () {
return {
list: [],
busy: false，
page: 0，
total: 0,
params: {
current: 1,
size: 10
}
}
}
methods: {
loadMore: function() {
this.busy = true
setTimeout(() => {
// 当前页数如果小于总页数，则继续请求数据，如果大于总页数，则滚动加载停止
if (this.params.current < this.total) {
// 这里是列表请求数据的接口,在这个接口中更新总页数
this.getData(this.page)
} else {
}
this.busy = false
}, 1000)
},
getData (data) {
this.params.current = data
this.$api.exam.examIndex(this.params).then(res => {
this.log(res.data)
if (res.data.code === 200) {
this.busy = false
// 总条数
this.total = res.data.page.total
// 页数递增
this.page++
const list = res.data.list
})
}
}
v-infinite-scroll="loadMore" : 表示回调函数是 loadMore
infinite-scroll-throttle-delay="500": 检查 busy 的值的时间间隔，默认值是 200 ，因为 vue-infinite-scroll 的基础原理就是，vue-infinite-scroll 会循环检查 busy 的值，以及是否滚动到底，只有当：busy 为 false 且滚动到底，回调函数才会执行。
infinite-scroll-disabled="busy": 表示由变量 busy 决定是否执行 loadMore ， false 则执行 loadMore ， true 则不执行
immediate-check="false": 默认值 true ， 表示该指令应该在绑定后立即检查。如果可能，内容不够高，不足以填满可滚动的容器。
infinite-scroll-distance="50": 距离页面底部多少像素时，执行 loadMore 函数
