简介

在移动端开发中，一个列表往往默认只加载有限的几条，想看更多只能逐渐往下翻页
Element UI的开发者开发了一款专用于Vue的无限上拉加载插件vue-infinite-scroll

步骤

安装

• 安装：npm i vue-infinite-scroll --save

引入

• 修改src/main.js文件

import Vue from 'vue'
import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)

使用

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  <div v-for="item in data" :key="item.index">{{item.name}}</div>
</div>

<script>
export default {
  data: {
    count: 0,
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true
      // 模拟Ajax请求
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({name: this.count++ })
        }
        this.busy = false
      }, 1000)
    }
  }
}
</script>

备注

• v-infinite-scroll="loadMore"：表示回调函数是loadMore
• infinite-scroll-disabled="busy"：表示由变量busy决定是否执行loadMore(false则执行loadMore，true则不执行)，看清楚，busy表示繁忙，繁忙的时候是不执行的。
• infinite-scroll-distance="10"：这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。通常我们会在页尾做一个几十像素高的“正在加载中…”，这样的话，可以把这个div的高度设为 infinite-scroll-distance的值即可。

API