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