1 <template>  
 2   <div class="page-navbar">  
 3     <div class="page-title">Navbar</div>  
 4     <!-- navbar -->  
 5     <mt-navbar class="page-part" v-model="selected">  
 6       <mt-tab-item id="1">选项一</mt-tab-item>  
 7       <mt-tab-item id="2">选项二</mt-tab-item>  
 8       <mt-tab-item id="3">选项三</mt-tab-item>  
 9     </mt-navbar>  
10   
11     <div>  
12       <mt-cell class="page-part" title="当前选中">{{ selected }}</mt-cell>  
13     </div>  
14   
15     <!-- tabcontainer -->  
16     <mt-tab-container v-model="selected">  
17       <mt-tab-container-item id="1">  
18         <mt-cell v-for="n in 10" :title="'内容 ' + n" />  
19       </mt-tab-container-item>  
20       <mt-tab-container-item id="2">  
21         <mt-cell v-for="n in 4" :title="'测试 ' + n" />  
22       </mt-tab-container-item>  
23       <mt-tab-container-item id="3">  
24         <mt-cell v-for="n in 6" :title="'选项 ' + n" />  
25       </mt-tab-container-item>  
26     </mt-tab-container>  
27   </div>  
28 </template>  
29   
30 <script>  
31 export default {  
32   name: 'page-navbar',  
33   
34   data() {  
35     return {  
36       selected: '1'  
37     };  
38   }  
39 };  
40 </script>  

 1 <template>  
 2   <div>  
 3     <div class="nav">  
 4       <mt-button size="small" @click.native.prevent="active = 'tab-container1'">tab 1</mt-button>  
 5       <mt-button size="small" @click.native.prevent="active = 'tab-container2'">tab 2</mt-button>  
 6       <mt-button size="small" @click.native.prevent="active = 'tab-container3'">tab 3</mt-button>  
 7     </div>  
 8       
 9     <div class="page-tab-container">  
10       <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>  
11         <mt-tab-container-item id="tab-container1">  
12             <!-- cell组件 -->  
13           <mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>  
14         </mt-tab-container-item>  
15         <mt-tab-container-item id="tab-container2">  
16             <!-- cell组件 -->  
17           <mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>  
18         </mt-tab-container-item>  
19         <mt-tab-container-item id="tab-container3">  
20             <!-- cell组件 -->  
21           <mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>  
22         </mt-tab-container-item>  
23       </mt-tab-container>  
24     </div>  
25   </div>  
26 </template>  
27   
28 <script>  
29 export default {  
30   name: 'page-tab-container',  
31   data() {  
32     return {  
33       active: 'tab-container1'  
34     };  
35   }  
36 };  
37 </script>  
38   
39 <style lang="css" scoped>  
40   .item {  
41     display: inline-block;  
42   }  
43   
44   .nav {  
45     padding: 10px;  
46   }  
47   
48   .link {  
49     color: inherit;  
50     padding: 20px;  
51     display: block;  
52   }  
53 </style>