【Vue.js】加载更多—vue-infinite-scroll
引言
今天用到了一个加载更多的插件，用起来很方便，插件的名字叫做vue-infinite-scroll
我们可以去npmjs.com官网看一下这个vue-infinite-scroll的用法，官网上面写的已经很简单易懂的了。
安装
npm install vue-infinite-scroll --save
引入
官网介绍了三种引入该插件的方式，分别是Common js方式(require("XXXX")) 、 ES6语法方式(import xxx from xxx)、 还有直接<script src="../node_modules/vue-infinite-scroll/vue-infinite-scroll.js"></script>
我的是vue项目，使用的是ES6语法，当然是用ES6语法方式导入啦。
上面安装成功之后，在main.js文件下引入该插件，输入下面的代码
import VueLazyLoad from 'vue-lazyload'
Vue.use(infiniteScroll)
使用
官网上面已经给出了例子，如下：
1）首先下面这段官网给出的div的DOM元素放在你<template><div></div></template>的任意地方，都没问题哒！
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
...
</div>
2）因为要通过busy变量来控制infinite-scroll-disabled（无线滚动禁止）属性，你可能会问，啥子叫无线滚动禁止属性丫？？？
那么你就要先知道dom里面的infinite-scroll-distance="10"是用来干嘛的？
infinite-scroll-distance这个属性，叫无线滚动间距，顾名思义，就是规定滑动条与列表外层div的底部的距离，假如infinite-scroll-distance=“10”，就是说，滚动条距离外层div底部的距离如果低于或者等于10，就会无限次数出发loadMore事件！！！！！
那怎么控制它不要无线触发loadMore事件呢，就是靠infinite-scroll-disabled（无线滚动禁止）属性来控制，false就是不禁止，true就是禁止的意思。
例子
看下面例子：
<script>
export default {
data () {
return {
page: 1,
pageSize: 8,
// 加载更多属性
busy: true// 无线滚动禁用
}
},
mounted () {
this.getGoodsList()
},
methods: {
// 获取商品列表
getGoodsList (flag) {
let param = {
page: this.page,
pageSize: this.pageSize,
sort: this.sortFlag ? 1 : -1
}
this.http.get('/goods', {params: param}).then((response) => {
let res = response.data
if (res.status === '0') {
// flag === true，证明是第二次或第二次以上加载数据了
if (flag) {
this.goodsList = this.goodsList.concat(res.result.list) // 数据追加
this.busy = false // 无线滚动禁止 取消，意思就是开启无限滚动监听
if (res.result.list.length === 0) {
this.busy = true // 无线滚动禁止 启动
} else {
this.busy = false // 无线滚动禁止 取消
}
} else { // 第一次加载数据
this.goodsList = res.result.list
this.busy = false // 无线滚动禁止 取消
}
} else { // 接口调用异常
this.goodsList = []
}
})
},
// 加载更多
loadMore () {
this.busy = true // 无线滚动禁止
setTimeout(() => {
this.page++
this.getGoodsList(true) // 调用获取商品的接口
}, 500)
}
}
}
</script>
注意
值得注意的是，为什么要在loadMore里面，再调用接口的时候，加了个延迟函数，并设延迟500ms呢？
我也不明白~~
这500ms的时间差，作用是，当你能够无线滚动禁止设为 false的时候，当滚动条间距与底部相差10的时候，它会就无限制的调用loadMore函数，并且已500ms的时间差进行无线循环请求。
其实不要这个setTimeout函数也是可以的，只要我们合理的控制busy的true与false，就能够很好地控制请求的次数，实现加载更多的功能，像上面的例子一样！
之前也有讲过另外两种加载更多的实现，有兴趣的小伙伴可以跳转查阅。
---end---
