天天看點

mintUi上拉加載 mt-loadmore 上拉失效

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

繼續閱讀