在使用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();
}
});
},