vue--加载更多(mint-ui)

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)
        }
    },

猜你喜欢

转载自blog.csdn.net/danruWang/article/details/88120756