在使用mint-ui的上拉加载组件loadmore时,有时会出现上拉加载无效或者拉不动,虽然加载了数据但是不能滑动。
需要注意两点,你的内容开始是没有内容的,所有容器没有高度,导致在上拉的时候没办法监听到距离底部的距离,从而触发不了上拉记载。
容器设置overfell
//wrapperHeight设备容器的高度,或者知道高度直接设置,不能用百分比
<div class="main-body" ref="wrapper" :style="{ height: (wrapperHeight) + 'px' }">
<mt-loadmore
ref="loadmore"
:autoFill="false"
:bottom-method="loadBottom"
:bottomLoadingText="bottomLoadingText"
:bottomDistance="30"
:bottomDropText="bottomDropText"
:bottomAllLoaded="allLoaded"
:bottomPullText="bottomPullText"
>
<div style="padding:15px;">
<div
class="order_item"
flex="dir:top main:justify"
v-for="(item,index) in orderList"
@click="goDetail(item.orderNo)"
:key="index"
v-if="orderList.length > 0 && dataLoading"
>
</div>
</mt-loadmore>
</div>
//获取到数据的时候记得调用一次this.$refs.loadmore.onBottomLoaded();
loadBottom() {
if (this.storeList.length < this.allNum) {
this.getData();
} else {
this.bottomDropText = "我是有底线的...";
this.bottomPullText = "我是有底线的...";
this.bottomLoadingText = "我是有底线的...";
setTimeout(() => {
this.$refs.loadmore.onBottomLoaded(); //去除loading
}, 500);
}
},
getData(val) {
if (val) {
this.page = 1;
this.storeList = [];
}
const data = {
order: "DESC",
orderBy: "id",
page: this.page,
size: 10,
state: 1
};
let count = 3;
if (this.name) {
data.name = this.name;
count--;
}
if (this.bizName) {
data.bizName = this.bizName;
count--;
}
if (this.code) {
data.code = this.code;
count--;
}
if (count == 3) {
Toast("请输入查询条件");
return;
}
let params = Utils.vSign();
this.$api.getStore(params, data).then(res => {
this.storeList = this.storeList.concat(res.data);
this.allNum = res.page.allNum;
this.page++;
this.allLoaded = false;
if (this.page > 2) {
this.$refs.loadmore.onBottomLoaded();
}
});
},