组件库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 = '';
}