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()
}

注意事项

1、父容器 须设置 height ；且overflow: scroll；
2、组件内根元素 设置 min-height 与父容器同高：解决 内容不足父容器高度 时，显示问题。
3、auto-fill="false" 去掉自动检测。
4、ios下loadmore组件和-webkit-overflow-scrolling属性冲突无法上拉问题