mintui loadmore組件使用+代碼優化

先上代碼

// home.vue

<template>
  <div>
    <mt-navbar v-model="selected" ref="navbar">
      <mt-tab-item id="1">待處理</mt-tab-item>
      <mt-tab-item id="2">已完成</mt-tab-item>
    </mt-navbar>
    <mt-tab-container swipeable v-model="selected">
      <mt-tab-container-item id="1">
        <div class="tab-container-item-base" :style="{height: pd.loadMoreH}">
          <mt-loadmore :top-method="loadTop1" :autoFill="autoFill" :bottom-method="loadBottom1" :bottom-all-loaded="pageMore1.allLoaded" bottomPullText="上拉加載更多" ref="loadmore1">
            <ul :style="{minHeight: pd.loadMoreH}">
              <li v-for="item in pageMore1.pageList" @click="goMessage(item)">{{ item }}</li>
              <by-no-data v-show="!pageMore1.pageList.length"></by-no-data>
            </ul>
          </mt-loadmore>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="tab-container-item-base" :style="{height: pd.loadMoreH}">
          <mt-loadmore :top-method="loadTop2" :autoFill="autoFill" :bottom-method="loadBottom2" :bottom-all-loaded="pageMore2.allLoaded" bottomPullText="上拉加載更多" ref="loadmore2">
            <ul :style="{minHeight: pd.loadMoreH}">
              <li v-for="item in pageMore2.pageList">{{ item }}</li>
              <by-no-data v-show="!pageMore2.pageList.length"></by-no-data>
            </ul>
          </mt-loadmore>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
  import { messagePageList } from "@/api/index.js"
  import { getClientH, getPosForView } from '@/libs/DOMUtil.js'
  import LoadMore from '@/service/loadMore.js'

  export default {
    name: 'Home',
    components: {
    },
    data () {
      return {
        selected: '1',
        pd: {
          loadMoreH: '1px',
        },

        pageMore1: {
          pageList:[],
          allLoaded: false,
        },
        pageMore2: {
          pageList:[],
          allLoaded: false,
        },
        autoFill: false,
      }
    },
    mounted () {
      this.pd.loadMoreH = (getClientH() - getPosForView(this.$refs.loadmore1.$el).top) + 'px'
      this.loadTop1();
    },
    computed: {
    },
    methods: {
      loadTop1 () { //組件提供的下拉觸發方法
        //下拉加載
        this.loadMore1.loadTop(this);
      },
      loadBottom1 () {
        // 上拉加載
        this.loadMore1.loadBottom(this);// 上拉觸發的分頁查詢
      },
      loadTop2 () {
        this.loadMore2.loadTop(this);
      },
      loadBottom2 () {
        this.loadMore2.loadBottom(this);
      },
      goMessage (item) {
        this.$router.push(`message/${item.appraisalusrs_id}`)
      }
    },
    created () {
      this.loadMore1 = new LoadMore('loadmore1', 'pageMore1', messagePageList, {appraisaltype_id: 0})
      this.loadMore2 = new LoadMore('loadmore2', 'pageMore2', messagePageList, {appraisaltype_id: 1})
    },
    watch: {
      'selected' (n, o) {
        if (n === '2' && !this.loadmore2Inited){
          this.loadmore2Inited = true
          this.loadTop2();
        }
      }
    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">
  li {
    height: 200px;
  }
  .tab-container-item-base {
    background: #f5f5f5;
    overflow: scroll;
  }
</style>

// loadMore.js

/**
 * 針對mintui loadmore 分頁組件的共用代碼
 *
 */

export default class LoadMore {
  /**
   * 構造器
   * @param dom 分頁組件 ref 名
   * @param container 分頁數據容器（經過容器，操做頁面數據）
   * container: {
   *       pageList:[],       // 數據集合
   *       allLoaded: false,  // 是否已所有加載完畢
   *    },
   * @param loadMoreApi 接口api
   * @param extraCondition  接口請求時 其餘參數
   */
  constructor(dom, container, loadMoreApi, extraCondition={}) {
    this.searchCondition = Object.assign({fenyePage: 1}, extraCondition)
    this.$el = dom
    this.container = container
    this.loadMoreApi = loadMoreApi
  }

  loadTop(vm) { //組件提供的下拉觸發方法
    //下拉加載
    this.loadInit(vm);
    vm.$refs[this.$el].onTopLoaded();// 固定方法，查詢完要調用一次，用於從新定位
  }

  loadBottom(vm) {
    // 上拉加載
    this.loadMore(vm);// 上拉觸發的分頁查詢
    vm.$refs[this.$el].onBottomLoaded();// 固定方法，查詢完要調用一次，用於從新定位
  }

  loadInit(vm) {
    // 查詢數據
    this.searchCondition.fenyePage = 1
    this.loadMoreApi(this.searchCondition).then(data => {
      // 是否還有下一頁，加個方法判斷，沒有下一頁要禁止上拉
      this.isHaveMore(vm, data.current_page, data.last_page)
      vm[this.container].pageList = data.data;
      /*vm.$nextTick(function () {
       // 原意是DOM更新循環結束時調用延遲迴調函數，大意就是DOM元素在由於某些緣由要進行修改就在這裏寫，要在修改某些數據後才能寫，
       // 這裏之因此加是由於有個坑，iphone在使用-webkit-overflow-scrolling屬性，就是移動端彈性滾動效果時會屏蔽loadmore的上拉加載效果，
       // 花了很久才解決這個問題，就是用這個函數，意思就是先設置屬性爲auto，正常滑動，加載完數據後改爲彈性滑動，安卓沒有這個問題，移動端彈性滑動體驗會更好
       vm.scrollMode = "touch";
       });*/
    });
  }

  loadMore(vm) {
    // 分頁查詢
    this.searchCondition.fenyePage++
    this.loadMoreApi(this.searchCondition).then(data=> {
      vm[this.container].pageList = vm[this.container].pageList.concat(data.data);
      this.isHaveMore(vm, data.current_page, data.last_page);
    });
  }

  isHaveMore(vm, current_page, last_page) {
    // 是否還有下一頁，若是沒有就禁止上拉刷新
    vm[this.container].allLoaded = true; //true是禁止上拉加載
    if (current_page < last_page) {
      vm[this.container].allLoaded = false;
    }
  }
}

// DOMUtil.js

/**
 * 獲得body高度
 * @returns {Number|number}
 */
export const getClientH = () => {
  return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
/**
 * 獲得元素相對窗口的位置信息-相對於左上角
 * @returns {Number|number}
 */
export const getPosForView = ($el) => {
  return $el.getBoundingClientRect()
}

注意事項

一、父容器 須設置 height ；且overflow: scroll；
二、組件內根元素 設置 min-height 與父容器同高：解決 內容不足父容器高度 時，顯示問題。
三、auto-fill="false" 去掉自動檢測。
四、ios下loadmore組件和-webkit-overflow-scrolling屬性衝突沒法上拉問題