mintui loadmore组件使用+代码优化

Posted 2022-02-20 fan-zha

先上代码

// 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属性冲突无法上拉问题