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 
原文：https://blog.csdn.net/woyidingshijingcheng/article/details/79899823 
版權宣告：本文為博主原創文章，轉載請附上博文連結！