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

【Vue.js】加载更多—vue-infinite-scroll

推荐阅读