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

1 篇文章 0 订阅
1 篇文章 0 订阅

在使用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();
        }
      });
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值