【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---