vue中mint-ui使用实例

介绍一下mint-ui的特性

特性介绍

• Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

• 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

• 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

• 依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

这个组件库，适合于基于vue的手机页面开发。

Infinite scroll 和 Navbar结合使用

Navbar 是这样的↓

Infinite scroll 是这样的↓

两个结合起来，就是把Infinite scroll嵌套在 <mt-tab-container-item id="1"></mt-tab-container-item>里面，然后效果就出来了。

<mt-navbar v-model="selected" >

 <mt-tab-item id="1">选项一</mt-tab-item>

 <mt-tab-item id="2">选项二</mt-tab-item>

</mt-navbar>

<mt-tab-container v-model="selected">

 <mt-tab-container-item id="1">

 <p v-infinite-scroll="loadMore"

  infinite-scroll-disabled="loading"

  infinite-scroll-distance="10"

  class="content"

 >

 </p>

 </mt-tab-container-item>

 <mt-tab-container-item id="2">

 <p v-infinite-scroll="loadMoreReceive"

  infinite-scroll-disabled="loadingReceive"

  infinite-scroll-distance="10"

  class="content"

 >

 </p>

 </mt-tab-container-item>

</mt-tab-container>

这样基本页面就出来了。

有个小问题就是，这是一个页面，滚动条是共用的。也就是说，你在选项卡一拉出来好几页数据之后，再到选项卡二，滚动条的位置是不会变的，你的选项卡二的内容，会被拉出来好多页的数据。如果某个选项卡的数据比较少，会影响到其他选项卡的数据加载。

这个问题，找了半天，最后发现一个和简单的办法。在Infinite-Scroll里面，添加一个v-if=selected == id，把Infinite-scroll和选项卡的id、selected相结合，选中的selected与id对应的时候，才进行对应的Infinite-Scroll。

Infinite-Scroll的代码如下：

<p v-infinite-scroll="loadMore"

 infinite-scroll-disabled="loading"

 infinite-scroll-distance="10"

 class="content"

 v-if="selected == 1"

>

根据需要，v-if的条件进行修改。

v-infinite-scroll 所绑定的方法，会在vue的mounted之后，before之前第一次执行，不需要另外调用。