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>  

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>  

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：