vue-infinite-scroll 滚动分页加载

1、安装插件

npm i --save v-infinite-scroll

2、使用

main.js

import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll);

<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>