关于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 = '';}