vue-infinite-scroll

具体网址(https://www.npmjs.com/package/vue-infinite-scroll)

使用

1
2
3

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

html
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>
<div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="20">
  <img src="../assets/loading-svg/loading-bubbles.svg" alt="Loading icon" v-show="loading" />
</div>

要定义的事项

定义busy data(){return {busy：false}}

定义loadMore方法

loadMore: function() {  
  this.busy = true;
  this.loadding = true;
  setTimeout(() => {
    this.page++;  //改变参数
    this.getGoodslist(true);  //请求数据
  }, 500);
}
getGoodslist(flag){
  var param = {
    page: this.page,
    pageSize:this.pageSize,
    sort:this.sortFlag?1:-1,
    priceLevel:this.nowIndex
  }
  axios.get('/goods/list',{
   params:param
  }).then((response)=>{
    response = response.data;
    if(response.status == 0){
    this.loading =true;
      if(flag){
        this.goods = this.goods.concat(response.result.list);
        if(response.result.count == 0){
          this.busy = true;
          this.loading =false;
        }else{
          this.busy = false;
        }
      }else{
        this.goods = response.result.list;
        this.busy = false;
      }
      
    }else{
        this.goods = [];
    }
  })
}

官方案例
loadMore：function（）{
      this.busy = true;
 
      setTimeout（（）=> {
        for（var i = 0，j = 10; i <j; i ++）{
          this.data.push（{name：count ++}）;
        }
        this.busy = false;
      }，1000）;
    }