mint-ui是vue开发中常用的组件库，而loadmore 通常用于处理下拉加载与上拉加载
坑1、页面渲染完，loadmore设置的上拉/下拉执行两次
产生原因：loadmore设置中的auto-fill需要设置为false
实现代码如下：
<load-more :bottom-method="loadBottom" :bottom-all-loaded="isLoadAll" ref="loadmore" :auto-fill="false">
<div v-for="item of datas">
<p>{{item}}</p>
</div>
</load-more>
坑2、页面上拉/下拉后一直加载不结束，loadmore的加载中一直转圈圈
如下图所示
产生原因：数据加载时未调用 onBottomLoaded()方法
实现代码如下
<load-more :bottom-method="loadBottom" :bottom-all-loaded="isLoadAll" ref="loadmore" :auto-fill="false">
<div v-for="item of datas">
<p>{{item}}</p>
</div>
</load-more>
loadBottom() {
if (!this.isLoadAll) {
!!!
!!!
!!!
下面这一行不应该放在:bottom-all-loaded=true的条件下，别被网上的误导了，否则除非加载完全部内容，“加载中”将会在加载完后出现。。
this.$refs.loadmore.onBottomLoaded(); //通知loadmore组件从新渲染，计算
this.currentPage++;
//网络请求加载数据 省略
} else {
console.log("已加载全部");
}
},
坑3、loadmore上拉/下拉加载与滚动事件冲突，造成页面卡顿，滑动会回弹
这个坑是比较隐蔽的，一开始也是一头雾水，后面查看了loadmore组件的源码，在源码中才找到一点端倪
mint-ui的loadmore组件触发下拉/上拉加载的原理：（源码：http://mint-ui.github.io/docs/#/en2/loadmore）
checkBottomReached() {
if (this.scrollEventTarget === window) {
return document.body.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight;
} else {
return this.$el.getBoundingClientRect().bottom <= this.scrollEventTarget.getBoundingClientRect().bottom + 1;
}
},
仔细阅读源码会发现，下拉/上拉加载的触发条件是父组件与组件本身距离底部的高度是一样的，即：
this.$el.getBoundingClientRect().bottom 与 this.scrollEventTarget.getBoundingClientRect().bottom + 1 的值基本相等，造成滑动时并就好触发上拉/下拉加载，从而加载数据，页面滚动卡顿
解决方法：
将父组件的高度设置为屏幕所需要展示的高度（如果需要全屏展示，就设置为100%）
注：如果要下拉/上拉加载一定要保证父组件高度小于下拉组件本身
---------------------
作者：涟动下渔舟
来源：CSDN
原文：https://blog.csdn.net/woyidingshijingcheng/article/details/79899823
版权声明：本文为博主原创文章，转载请附上博文链接！
改动项目代码：
敲黑板！！*******如果要下拉/上拉加载一定要保证父组件高度小于下拉组件本身*********
load-more的父元素：
<div ref="loadMoreShell" style="overflow-y: scroll;min-height: 100vh" :class="$style.list">
//处理一下loadMore父元素的height
this.$refs.loadMoreShell.style.height = (30 * this.list.length) +'vh'
敲黑板！！*******如果要下拉/上拉加载一定要保证父组件高度小于下拉组件本身*********
个人试过如果改成
this.$refs.loadMoreShell.style.height = (50 * this.list.length) +'vh' 就GG了
我的项目是这样的：
网友评论