关于vue.js:组件库Mint-UI上拉加载更多插件Loadmore的使用tips

html

<top-loadmore :distanceIndex="2" :bottom-method="addMoreData" :auto-fill="false" ref="loadmore" :bottomPullText="bottomPullText">
 <div class="list-item" v-for="(item,index) in listArr" :key="index" @click="toRecordDetail(item.user_exchange_id)">
 列表内容
 </div>
</top-loadmore>

js

import {Loadmore} from "mint-ui";
export default {
 components: {"top-loadmore": Loadmore,},
 data(){
     return{
         page_num:1,
         bottomPullText:"上拉加载更多",
     }
 },
  methods:{loadList(){if(_this.page_num!=1){_this.$refs.loadmore.onBottomLoaded();// 这里数据回调胜利之后要从新获取 mt-loadmore 外部的高度, 避免上拉后不复位, 首次申请或查问第一页不执行，避免头部 scroll 遮挡问题
         }
     },
     addMoreData(){if(this.flag) return false
         if (this.totalPageNum > this.page_num) {
             this.page_num++
             this.loadList()}
         this.$refs.loadmore.onBottomLoaded();
// 这里数据回调胜利之后要从新获取 mt-loadmore 外部的高度, 避免上拉后不复位。如果是下拉刷新页面，则须要执行：this.$refs.loadmore.onTopLoaded();},
 },
}

上拉过程中容易触发列表点击事件修复
需批改两个文件：
\node_modules\mint-ui\lib\mint-ui.common.js
\node_modules\mint-ui\lib\loadmore\index.js


批改内容：

handleTouchEnd: function handleTouchEnd(event) {if (this.direction === 'down' && this.getScrollTop(this.scrollEventTarget) === 0 && this.translate > 0) {event.preventDefault();// 此处为阻止滑动时点击 click，自定义增加
     event.stopPropagation();// 此处为阻止滑动时点击 click，自定义增加
     this.topDropped = true;
     if (this.topStatus === 'drop') {
       this.translate = '50';
       this.topStatus = 'loading';
       this.topMethod();} else {
       this.translate = '0';
       this.topStatus = 'pull';
     }
   }
   if (this.direction === 'up' && this.bottomReached && this.translate < 0) {event.preventDefault();// 此处为阻止滑动时点击 click，自定义增加
     event.stopPropagation();// 此处为阻止滑动时点击 click，自定义增加
     this.bottomDropped = true;
     this.bottomReached = false;
     if (this.bottomStatus === 'drop') {
       this.translate = '-50';
       this.bottomStatus = 'loading';
       this.bottomMethod();} else {
       this.translate = '0';
       this.bottomStatus = 'pull';
     }
   }
   this.$emit('translate-change', this.translate);
   this.direction = '';
}