mint-ui —— navbar和tab-container的区别

navbar的具体实现

 <template>
   <div class="page-navbar">
     <div class="page-title">Navbar</div>
     <!-- navbar -->
     <mt-navbar class="page-part" v-model="selected">
       <mt-tab-item id="1">选项一</mt-tab-item>
       <mt-tab-item id="2">选项二</mt-tab-item>
       <mt-tab-item id="3">选项三</mt-tab-item>
     </mt-navbar>  

     <div>
       <mt-cell class="page-part" title="当前选中">{{ selected }}</mt-cell>
     </div>  

     <!-- tabcontainer -->
     <mt-tab-container v-model="selected">
       <mt-tab-container-item id="1">
         <mt-cell v-for="n in 10" :title="'内容 ' + n" />
       </mt-tab-container-item>
       <mt-tab-container-item id="2">
         <mt-cell v-for="n in 4" :title="'测试 ' + n" />
       </mt-tab-container-item>
       <mt-tab-container-item id="3">
         <mt-cell v-for="n in 6" :title="'选项 ' + n" />
       </mt-tab-container-item>
     </mt-tab-container>
   </div>
 </template>  

 <script>
 export default {
   name: 'page-navbar',  

   data() {
     return {
       selected: '1'
     };
   }
 };
 </script>  

navbar.vue

Import

按需引入：

import { Navbar, TabItem } from 'mint-ui';

Vue.component(Navbar.name, Navbar);

Vue.component(TabItem.name, TabItem);

全局导入：全局导入后不用再导入

importMintfrom'mint-ui'

import'mint-ui/lib/style.css'

Vue.use(Mint);

API

API

navbar

参数	说明	类型	可选值	默认值
fixed	固定在页面顶部	Boolean		false
value	返回当前选中的 tab-item 的 id	*

tab-item

参数	说明	类型	可选值	默认值
id	选中后的返回值	*

Slot

navbar

name	描述
-	内容

tab-item

name	描述
-	显示文字
icon	icon 图标

show：

点击选项二

navbar是选项卡之间的切换，可以更改切换后选项卡的样式，因为每一个激活后都会有一个mint-tab-item is-selected的一个类，显示被激活，而tab-container是按钮之间的切换，可以有左右滑动的特效，具体实现如下：

tab-container的具体实现

面板，可切换显示子页面。

常与navbar、tabbar结合使用

 <template>
   <div>
     <div class="nav">
       <mt-button size="small" @click.native.prevent="active = 'tab-container1'">tab 1</mt-button>
       <mt-button size="small" @click.native.prevent="active = 'tab-container2'">tab 2</mt-button>
       <mt-button size="small" @click.native.prevent="active = 'tab-container3'">tab 3</mt-button>
     </div>  

     <div class="page-tab-container">
       <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
         <mt-tab-container-item id="tab-container1">
             <!-- cell组件 -->
           <mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
         </mt-tab-container-item>
         <mt-tab-container-item id="tab-container2">
             <!-- cell组件 -->
           <mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
         </mt-tab-container-item>
         <mt-tab-container-item id="tab-container3">
             <!-- cell组件 -->
           <mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
         </mt-tab-container-item>
       </mt-tab-container>
     </div>
   </div>
 </template>  

 <script>
 export default {
   name: 'page-tab-container',
   data() {
     return {
       active: 'tab-container1'
     };
   }
 };
 </script>  

 <style lang="css" scoped>
   .item {
     display: inline-block;
   }  

   .nav {
     padding: 10px;
   }  

   .link {
     color: inherit;
     padding: 20px;
     display: block;
   }
 </style>  

tab-container.vue

Import

按需引入：

import { TabContainer, TabContainerItem } from 'mint-ui';

Vue.component(TabContainer.name, TabContainer);

Vue.component(TabContainerItem.name, TabContainerItem);

全局导入：全局导入后不用再导入

importMintfrom'mint-ui'

import'mint-ui/lib/style.css'

Vue.use(Mint);

API

API

tab-container

参数	说明	类型	可选值	默认值
value	当前激活的 id	*
swipeable	显示滑动效果	Boolean		false

tab-container-item

参数	说明	类型	可选值	默认值
id	item 的 id	*

Slot

tab-container

name	描述
-	内容

tab-container-item

name	描述
-	内容

show：