mint-ui 下拉组件loadmore踩坑

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) {
          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博主「涟动下渔舟」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/woyidingshijingcheng/article/details/79899823

评论 (0)