共计 1754 个字符,预计需要花费 5 分钟才能阅读完成。
- 引入
import {Loadmore} from “mint-ui”; -
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 = ''; }
正文完