引言
今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做vue-infinite-scroll
我们可以去npmjs.com官网看一下这个vue-infinite-scroll的用法,官网上面写的已经很简单易懂的了。
安装
npm install vue-infinite-scroll --save
引入
官网介绍了三种引入该插件的方式,分别是Common js方式(require("XXXX")) 、 ES6语法方式(import xxx from xxx)、 还有直接
我的是vue项目,使用的是ES6语法,当然是用ES6语法方式导入啦。
上面安装成功之后,在main.js文件下引入该插件,输入下面的代码
import VueLazyLoad from 'vue-lazyload'
Vue.use(infiniteScroll)
使用
官网上面已经给出了例子,如下:
1)首先下面这段官网给出的div的DOM元素放在你的任意地方,都没问题哒!
...
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就是禁止的意思。
例子
看下面例子:
注意
值得注意的是,为什么要在loadMore里面,再调用接口的时候,加了个延迟函数,并设延迟500ms呢?
我也不明白~~
这500ms的时间差,作用是,当你能够无线滚动禁止设为 false的时候,当滚动条间距与底部相差10的时候,它会就无限制的调用loadMore函数,并且已500ms的时间差进行无线循环请求。
其实不要这个setTimeout函数也是可以的,只要我们合理的控制busy的true与false,就能够很好地控制请求的次数,实现加载更多的功能,像上面的例子一样!
之前也有讲过另外两种加载更多的实现,有兴趣的小伙伴可以跳转查阅。
---end---