mint-ui
借助mint-ui的Infinite scroll和Spinner组件
在需要加载数据的父盒子上加这个属性:(具体详见mint-ui)
<ol v-if="evaluate_list!=''" v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="10">
v-infinite-scroll:页面滚动时执行loadMore方法;
infinite-scroll-disabled:是否关闭无限滚动动 (默认是true :关闭)
<!--底部判断是加载图标还是提示“全部加载”-->
<li class="more_loading" v-show="!queryLoading">
<mt-spinner type="fading-circle" color="#00ccff" :size="20" v-if="loading&&!allLoaded"></mt-spinner>
<span v-if="allLoaded" class="load">已全部加载</span>
</li>
//这是主要的lodeMore方法
loadMore() {
this.moreLoading=true;
this.loading=true;
var _this=this;
if(this.allLoaded){
this.moreLoading = true;
return;
}
if(this.queryLoading){
return;
}
this.moreLoading = !this.queryLoading;
var _this=this;
setTimeout(function(){
_this.page++;
_this.moreLoading=false;
//请求数据
post_ajax(url,obj,function(res){
var list=res.data.list;
//没有数据时
if(list==''){
return;
}else{
list.forEach(function(item){
item.create_ts=get_str_time(item.create_ts);
if(item.images=='' && item.images.indexOf(',')==-1){
item.images=item.images;
}else{
item.images=item.images.split(',').slice(0,3);//截取图片
}
_this.evaluate_list.push(item);//在数组里push对象
})
}
if(_this.list_num==_this.evaluate_list.length){//判断总数和渲染的数组长度是否相等
_this.moreLoading=true;//不加载数据
_this.allLoaded=true;//显示已加载全部
_this.loading=false;//加载动画消失
}else{
_this.moreLoading=false
_this.allLoaded=false;
_this.loading=true;
}
_this.moreLoading = _this.allLoaded;
})
_this.moreLoading=false;
_this.loadMore=false;
},1500)
}
},