mintUI组件上拉加载解决方案

原文链接： mintUI组件上拉加载解决方案

Mint UI是由饿了么前端团队推出的一个开源UI框架，其特性包括如下：

1. Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
2. 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
3. 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
4. 依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

作者最近在开发一个博客系统，移动端使用的是nuxt.js。查了些资料，目前适合vue移动端的UI框架首推mintUI。也就没有多大犹豫,便以引入elementUI的思路把mintUI引入到了项目中。步骤如下：

安装：

 npm install --save mint-ui

nuxt.config.js里添加如下代码：

 css: ['mint-ui/lib/style.css'],
 plugins: ['@/plugins/mint-ui'],

根目录的plugins文件夹内添加mint-ui.js 文件，文件内容：

import Vue from 'vue'
import { Loadmore, Tabbar} from 'mint-ui'
export default () => {
  Vue.component(Loadmore.name, Loadmore)
  Vue.component(Tabbar.name, Tabbar)
}

以上就是nuxt.js引入minUI的简单步骤。使用cli3初始化的vue项目，引入mintUI的步骤与上面大同小异。

下面来说说一个小坑，mintUI的Loadmore组件，无法满足滚动条触底加载的需求。Loadmore组件的下拉和上拉都是通过按屏拖动来触发相应的回调，也没有触底触发的配置。官网的demo如下：

<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</mt-loadmore>

js这里省略。

为了实现滚动条触底加载的需求，作者添加了如下的代码(注：.vue文件)：

  mounted() {
      this.addScrollListen()
  },
  methods: {
  scrollhandle() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        console.log('已经触底....')
      }
    },
    addScrollListen() {
      window.addEventListener('scroll', this.scrollhandle)
    }
}

以上就是实现该功能的核心代码，此代码并不依赖作者使用的框架，且易于移植。

接着移除mt-loadmore组件内上拉注册的回调：

<mt-loadmore :top-method="loadTop" 
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</mt-loadmore>

以上就是mintUI触底加载解决方案。