mint-ui loadmore组件

mint-ui 的loadmore里的事件

<div class="jdlist" ref='wrapper' :style="{height:wrapperHeight+'px'}">
         <mt-loadmore :top-method="loadTop" ref="loadmore" class="loadmorewrap" id="scorllwrapper" :bottom-method="loadBottom" :bottom-all-loaded="loading" :auto-fill="false" :bottomDistance="10">
    <div v-for="list in orderlist"></div>
  </mt-loadmore>
</div>

html的部分这些就够了,注意loadmore的父层一定要加高度和增加overflow:scroll
首先高度在mounted里获取
this.wrapperHeight = document.documentElement.clientHeight -
this.$refs.wrapper.getBoundingClientRect().top;
loading默认是false

  loadTop(){
            var self=this;
            self.getOrderlist(self,self.userid,self.token,self.o_status,'top',self.o_day);
         },
getOrderlist(self,userid,token,status,loadtype,day){
            var listdata = new FormData();
            listdata.append("page", 0);
            listdata.append("size", this.o_size);
            listdata.append("status", status);
            listdata.append("day", day);
            listdata.append("userid", userid);
            var url=global.baseURL+''
            axios.post(url,listdata,
            {headers:
                {'Authorization':'Bearer '+token}
            })
            .then(function (response) {
                var resdata=response.data;
                self.orderlist=response.data.data;
                self.getTimes(self.orderlist);
                if(loadtype=='top'){
                    setTimeout(()=>{
                            self.$refs.loadmore.onTopLoaded();
                          },1000);
                    if(resdata.code==1000){
                        self.loading=false;//这里注意刷新完一定要吧loading重新设置成false，不然下拉刷新完将无法再上拉记载
                     }
                }
            }).catch(function (error) {
            })
        },
loadBottom(){
     var self=this;
self.getOrderlistmore(self,self.userid,self.token,self.o_status,'bottom',self.o_day);
},
getOrderlistmore(self,userid,token,status,loadtype,day){
            self.page=this.page+1
            var listdata = new FormData();
            listdata.append("page", this.page);
            listdata.append("size", this.o_size);
            listdata.append("status", status);
            listdata.append("day", day);
            listdata.append("userid", userid);
            var url=global.baseURL+''
            axios.post(url,listdata,
            {headers:
                {'Authorization':'Bearer '+token}
            })
            .then(function (response) {
                var m_list=response.data.data
                for(var i=0;i<m_list.length;i++){
                    self.orderlist.push(m_list[i])
                }
                self.getTimes(m_list);
                if(loadtype=='bottom'){
                    self.$refs.loadmore.onBottomLoaded();//这句是loading效果
                    if(response.data.code==1000){
                        if(m_list.length<10){
                            self.loading=true;//关键是加载完要设置为true，停止上拉
                            Toast({
                                duration:"3000",
                                position:'bottom',
                                message:'没有更多了'
                            })
                        }else{
                            self.loading=false
                        }
                        
                    }
                }
            }).catch(function (error) {
            })
        },

补充：我的上拉下拉是个切换卡，因为loadmore是同一个容器，所以你往上拉的时候，点击另一个tab它的内容就会定位到上一个tab拉到的位置处
在tab切换时增加滚到顶部即可
var loadme=document.getElementsByClassName('jdlist')[0];
loadm.scrollTop=0