使用vue-infinite-scroll实现无限滚动效果

 npm  i vue-infinite-scroll --save

main.js使用

import vueiInfinite from 'vue-infinite-scroll'
Vue.use(vueiInfinite)

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
     <div class="loading">加载中...</div>
</div>

1. loadMore是方法，里面是要执行的代码
2. busy的值是true的时候，就不再加载，如果是false就执行加载
3. 10表示距离底部为10 的时候就执行loadMore方法

loadMore () {
      this.busy = true
      //把busy置位true，这次请求结束前不再执行
      setTimeout(() => {
        this.page++
        this.getGoodLists(true)
        //调用获取数据接口，并且传入一个true，让axios方法指导是否需要拼接数组。
      }, 500)
    }

getGoodLists (flag) {
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortFlag ? 1 : -1
      }
      axios.get('/goods', {params: param}).then((response) => {
        let res = response.data
        if (flag) {
          this.goodList = this.goodList.concat(res.result.list)
          //如果是flagtrue，则拼接数组。
          if (res.result.count === 0) {
            this.busy = true
          } else {
            this.busy = false
          }
        } else {
          this.goodList = res.result.list
          this.busy = false
          第一次进来的时候，把busy置位false。执行loadMore的方法
        }
      })
    },