vue移动端上拉加载
mint-UI 插件,HTML定义加载的内容
<mt-loadmore
:bottom-method="loadBottom"
:auto-fill="false"
:bottomPullText="bottomText"
ref="loadmore"
@bottom-status-change="handleBottomChange">
<div>
<ul class="clearfix picBox" id="content">
<li class=" boxContent" v-for="item in list" :key="item.id">
<!--Content-->
</li>
</ul>
<div v-show="bottomStatus == 'pull'"
style="width:100%;text-align:center;margin-top:15px;margin-bottom:20px;z-index:99;">
{{text}}
</div>
</div>
</mt-loadmore>
在JavaScript中定义data和方法
export default {
data(){
return {
bottomText: "",
text:'',
bottomStatus: "",
pageNo:1,
totalPageCount:2,
list:[],
allLoaded:false
}
},
methods: {
//重新加载时需调用的方法,此处不能使用getList代替
anew(){
//清空数据的同时将“页数”置为 1,清空数据不能放在getList里面
this.list = []
this.pageNo = 1
this.getList()
},
//获取列表
getList() {
//加载框
Indicator.open({
text: "加载中...",
spinnerType: "snake"
});
//传递的参数,此处设置一页显示10条
let shop={
title:'',
typecode:'',
insuranceCode:''
}
let pageModel={
pageNo:this.pageNo,
pageSize:10
}
// 引用的接口函数
classList({shop,pageModel}).then(res=>{
console.log(res)
//获取数据
let rows = res.data.data.rows
//此处total是后台返回的数据总条数
let tatal = res.data.data.total
//每页10条数据,获取总页数
let total_pages = Math.ceil(tatal/10)
//如果总页数大于当前所在页可以加载,设置底部提示语
if( total_pages>this.pageNo){
this.text = "上拉加载更多...";
}else{
//此处设置只能加载两页
if (this.pageNo > 1) {
Indicator.close()
this.text = "— 我也是有底线的 —";
}
}
//将每一条数据循环遍历进list
if(rows.length != 0){
for( let i=0;i<rows.length;i++){
this.list.push(rows[i])
}
Indicator.close()
}else{
this.text = "— 我也是有底线的 —";
}
})
},
loadBottom() {
// 下拉刷新时进行页数判断
if (this.pageNo >= this.totalPageCount) {
console.log('加载完成')
this.allLoaded = true;
this.text = '— 我也是有底线的 —'
// 固定方法,加载完要调用一次,用于重新定位
this.$refs.loadmore.onBottomLoaded();
} else {
this.pageNo += 1;
console.log('未加载完,继续加载')
}
// 判断是否完全加载完
if (!this.allLoaded) {
//若没有加载完
setTimeout(() => {
this.getList();
this.$refs.loadmore.onBottomLoaded();
}, 1000);
}else{
//加载完成
}
},
}