vue 列表下拉触底加载分页数据、实现懒加载

 npm install vue-infinite-scroll --save

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

    <template>
      <section
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10">
    <!-- 列表 -->
    <div
      v-for="(item, index) in data"
      :key="index"
      class="items">
      {{ item.name }}
    </div>
    <!-- END -->
      </section>
    </template>
    
    <script>
    
    // 计数标识
    var count = 0;
    
    export default {
      data() {
    return {
      data: [],
    
      busy: false // 详解下：busy表示是否执行loadMOre函数，true表示不执行，fasle表示执行
    };
      },
    
      methods: {
    loadMore() {
      console.log('滚动触底');
      this.busy = true;
      // 模拟接口数据
      setTimeout(() => {
        for (var i = 0, j = 5; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 500);
    }
    
      }
    };
    </script>
    
    <style scoped>
    .items {
    background: rgb(229, 229, 229);
    padding: 20px;
    margin-bottom: 20px;
    }
    </style>