二次封裝mint-ui的loadMore組件

二次封裝mint-ui的loadMore組件

組件loadMore.vue

<template>
  <div class="moreListDiv" ref="wrapper" :style="{ height: (wrapperHeight) + 'px' }">
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="isAutoFill" :bottomDistance="30">
      <slot name="content"></slot>
    </mt-loadmore>
  </div>
</template>

<script>
export default {
  props: ["allLoaded"],

  data() {
    return {
      // allLoaded: false, // 能夠進行上拉
      isAutoFill: false, // 是否自動觸發上拉函數
      wrapperHeight: 0
    };
  },

  mounted() {
    // 父控件要加上高度，不然會出現上拉不動的狀況
    this.wrapperHeight =
      document.documentElement.clientHeight -
      this.$refs.wrapper.getBoundingClientRect().top;
  },

  methods: {
    // 下拉刷新
    loadTop() {
      // this.loadFrist();
      this.$parent.loadFrist();
      console.log("子=>父");
    },

    // 上拉加載
    loadBottom() {
      setTimeout(() => {
        // this.loadMoreData();
        this.$parent.loadMoreData();
      }, 1000);
    }
  }
};
</script>

<style>
.moreListDiv {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
</style>


複製代碼

global.js

// 下拉加載完的處理方法
initTopLoad() {
  setTimeout(() => {
    let child = this.$children;
    let child2 = child[0].$children;
    child2[0].onTopLoaded();
  }, 1000);
},

// 列表加載處理分頁方法
initBottomLoad() {
  let child = this.$children;
  let child2 = child[0].$children;
  child2[0].onBottomLoaded();
  if (this.params.pageNum == 1) {
    $(".moreListDiv").animate({ scrollTop: 0 }, 20);
  }
  this.loading = false;
}
複製代碼

example（舉個例子）

html

<!-- 列表 -->
    <loadMore :allLoaded="allLoaded">
      <div slot="content">
        <ul class="notificationList">
          <li v-for="(item,i) in infoList" :key="i" @click="goDetail(item.informationId)">
            <span>{{item.title}}</span>
            <p class="updatedDate">更新時間：{{item.releaseDate}}</p>
          </li>
        </ul>

        <!-- 列表數據過少，影響下拉刷新（臨時解決方案） -->
        <div class="zwLoadmore" v-show="infoList.length<4&&infoList.length>0"></div>

        <!-- 無數據時的顯示 -->
        <div class="noDataDiv" v-if="infoList.length===0&&!loading">
          <div>
            <div class="noData">
              <img class="img" src="http://hnnmy.oss-cn-shanghai.aliyuncs.com/file/demand/static/2019-06-13/484fc1c3-82e6-4d86-8fcd-26cf8b941ffe.png" alt="">
            </div>
            <p class="txt">查詢無數據</p>
          </div>
        </div>

        <div class="loadMoreGif" v-if="params.pageNum>1&&allLoaded">
          <p>沒有更多了</p>
        </div>
      </div>
    </loadMore>
複製代碼

js

// 下拉刷新加載
loadFrist() {
  this.params.pageNum = 1;
  this.$store.dispatch("noticeList/loadFristDeep", this.params).then(() => {
    this.initTopLoad();
  });
},

// 加載更多
loadMoreData() {
  this.params.pageNum = this.params.pageNum + 1;
  this.$store
    .dispatch("noticeList/loadMoreDataDeep", this.params)
    .then(() => {
      this.initBottomLoad();
    });
}
複製代碼

原創@昭陽。