vue-infinite-loading

安装

npm install vue-infinite-loading --save

基本使用

<template>
  <div>
    <div class="article-main" v-for="(item,index) in blogList" :key="index">
      {{item.title}}
      {{item.description}}
    </div>

    <!--infinite-loading这个组件要放在列表的底部，滚动的盒子里面-->
    <infinite-loading
      spinner="spiral"
      @infinite="infiniteHandler"
      :distance="200"
      class="infinite-loading-wrap"
    >
      <div slot="spinner">Loading...</div>
      <div slot="no-more">No more Data</div>
      <div slot="no-results">No results Data</div>
      <div slot="error" slot-scope="{ trigger }">
        Error Data, click <a href="javascript:;" @click="trigger">here</a> toretry
      </div>
    </infinite-loading>

  </div>
</template>

<script>	
	// 引入
  import InfiniteLoading from 'vue-infinite-loading'

  export default {
    name: "",
    data(){
      return{
        blogList:[],
      }
    },
    components: {
      InfiniteLoading
    },
    methods:{
      infiniteHandler($state) {
        this.$axios
          .get("请求地址")
          .then((res) => {
            if(res.data.data.length) {
              let arr = res.data.data;
              // this.blogList = this.blogList.concat(res.data.data);
              this.blogList = [...this.blogList,...arr]
              console.log(this.blogList)
              $state.loaded();
            }else {
              $state.complete();
            }
          })
      },
    }
  }
</script>