list列表页滚动加载

滚动加载

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

导入：
import infiniteScroll from 'vue-infinite-scroll'

配置：
export default {
         directives: {
              infiniteScroll
         }
} 

使用：
<div class="scroll-more" 
       v-infinite-scroll="scrollMore"     //回调函数
       infinite-scroll-disabled="true"    //由变量busy决定是否执行回调函数
       infinite-scroll-distance="410"     //页面滚动到离页尾多少像素时触发回调函数
       v-if="false">
       <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
</div>
//回调函数示例
scrollMore(){
       this.busy = true;
       setTimeout(() => {
              this.pageNum++;
       this.getList();
       }, 500);
},
// 专门给scrollMore使用
getList(){
       this.loading = true;
       this.axios.get('/orders',{
              params:{
                     pageSize:10,
                     pageNum:this.pageNum
              }
       }).then((res)=>{
              this.list = this.list.concat(res.list);
              this.loading = false;
              if(res.hasNextPage){
                     this.busy=false;
              }else{
                     this.busy=true;
              }
});
}