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;
    }
  }
复制代码

  以上只是个人一点点项目实践中的采坑记录，抛转引玉而已。