Mint UI是由饿了么前端团队推出的一个开源UI框架,其特性包括如下:
- Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
- 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
- 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
- 依托 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触底加载解决方案。