转载mint-ui 组件loadmore踩坑

mint-ui是vue开发中常用的组件库，而loadmore 通常用于处理下拉加载与上拉加载

坑1、页面渲染完，loadmore设置的上拉/下拉执行两次

产生原因：loadmore设置中的auto-fill需要设置为false

实现代码如下：

坑2、页面上拉/下拉后一直加载不结束，loadmore的加载中一直转圈圈

如下图所示

产生原因：数据加载时未调用 onBottomLoaded()方法

实现代码如下

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的父元素：

//处理一下loadMore父元素的height

this.$refs.loadMoreShell.style.height = (30 * this.list.length) +'vh'

敲黑板！！*******如果要下拉/上拉加载一定要保证父组件高度小于下拉组件本身*********

个人试过如果改成

this.$refs.loadMoreShell.style.height = (50 * this.list.length) +'vh' 就GG了

我的项目是这样的：