vue-infinite-scroll 滚动分页加载

1、安装插件

npm i --save v-infinite-scroll

2、使用

main.js

import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll);

.vue文件

  <div class="content clearfix">
  	   <ul class="clearfix">
  	   	  <li class="gl-list-con" v-for="item in goodsList">
  	   	  	 <div class="img"><img :src="imgsrc+item.productImage"></div>
  	   	  	 <div class="txt">
  	   	  	 	  <h3>{{item.productName}}</h3>
  	   	  	 	  <p class="detail">{{item.salePrice}} </p>
  	   	  	 	  <p class="addcar"><span>加入购物车</span></p>
  	   	  	 </div>
  	   	  </li>
  	   </ul> 
  	   <!--v-infinite-scroll-->
  	   <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30" class="clearfix">
                 .....加载中
       </div>
  	    	   
  </div> 

export default{ 
	data(){ 
		return {
			goodsList:[],
			sortFlag:true,    //默认升序
			page:1,
			pageSize:8,
			imgsrc: '../static/images/',
			busy:true
		}
	},
	mounted(){
       this.getGoodslist();		
	},
	methods:{
		getGoodslist(flag){
			var param={
				page:this.page,
				pageSize:this.pageSize,
				sort:this.sortFlag?1:-1  //升序或者降序排列
			}
			axios.get("/goods",{
				params:param
			}).then((response)=>{
				let res=response.data;
				console.log('res:'+res.status);
				if(res.status=="0"){
					if(flag){//如果flag为true则表示分页						
					   	this.goodsList=this.goodsList.concat(res.result.list);  //concat数组串联进行合并
					   	if(res.result.count==0){  //如果数据加载完 那么禁用滚动时间 this.busy设置为true
					   		console.log('res.result.count'+res.result.count);
					   		console.log(this.goodsList);
					   		this.busy=true;
					   		console.log('this.busy:'+this.busy);
					   	}else{ 
					   		this.busy=false;
					   		console.log('res.result.count'+res.result.count);
					   	}
					}
					else{//第一次进入页面 完全不需要数据拼接的
						this.goodsList=res.result.list;
						this.busy=false;
					}
				}else{
					this.goodsList=[]
				}
		  })				
	    },
	    sortGoods(){
	    	this.sortFlag=!this.sortFlag;
	    	this.page=1;
	    	this.getGoodslist();
	    	
	    },
	    //当属性滚动的时候  加载  滚动加载
	    loadMore(){	    	
	    	this.busy=true  //将无限滚动给禁用
	    	setTimeout(() => {  //发送请求有时间间隔第一个滚动时间结束后才发送第二个请求
	    	   this.page++;  //滚动之后加载第二页
	    	   this.getGoodslist(true);
            }, 500);	    	
	    }    
	},
   components:{
      navheader,
      navfooter,
      navbread
    }
}   
</script>