mint-ui兼容性問題

不兼容安卓5.1.1。

  緣由：發現打包後的代碼中，仍然有let。

  解決方法：vue.config.js添加 transpileDependencies: ['mint-ui/src/utils']

loadmore組件上拉不觸發。

  緣由：checkBottomReached方法中，直接使用document.body.scrollTop獲取滾動條高度。親測Chromedocument.body.scrollTop爲0，需使用document.documentElement.scrollTop能夠獲取正確的數據。

  解決辦法：使用getScrollTop方法獲取。getScrollTop該組件中已有，猜測是組件做者這裏忘記調用了。 const scrollTop = this.getScrollTop(window)

getScrollTop(element) {
        if (element === window) {
          return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);
        } else {
          return element.scrollTop;
        }
      },
複製代碼

小米 max3手機上拉依然不刷新。

  緣由：xiaomimax3獲取到的scrollTop始終差0.1，例如2846.9091796875 （我也沒找到官方說明，是本身實驗出的結果）

  解決辦法：scrollTop 向上取整。 return Math.ceil(scrollTop) + document.documentElement.clientHeight >= document.body.scrollHeight;

checkBottomReached函數最終爲

checkBottomReached() {

if (this.scrollEventTarget === window) {
      
      const scrollTop = this.getScrollTop(window)
      /* 兼容小米 max3手機底部上翻不刷新，緣由是獲取到的scrollTop差0.1，例如2846.9091796875 */
      return Math.ceil(scrollTop)  + document.documentElement.clientHeight >= document.body.scrollHeight;
    } else {
      return this.$el.getBoundingClientRect().bottom <= this.scrollEventTarget.getBoundingClientRect().bottom + 1;
    }
  }
複製代碼

  以上只是個人一點點項目實踐中的採坑記錄，拋轉引玉而已。