mint-ui的navbar导航栏的填坑

• mint-ui的navbar导航栏的填坑

• 用官方的demo直接导入到项目中有问题

  1、引入

  
  import { Navbar, TabItem } from 'mint-ui';  //导航栏
  
    import { TabContainer, TabContainerItem } from 'mint-ui';//Item
  
    import { Cell } from 'mint-ui';
  
  Vue.component(Navbar.name, Navbar);
  
    Vue.component(TabItem.name, TabItem);
  
    Vue.component(TabContainer.name, TabContainer);
  
    Vue.component(TabContainerItem.name, TabContainerItem);
  
    Vue.component(Cell.name, Cell);

  2、使用

  <!-- 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> <!-- 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>

   

   

  问题一：没有默认点击页面

  初始化参数：selected

  data(){   return {     selected:'1'   } }

   

  问题二：没有默认点击选中的导航条

  

  检查

  

  发现，多添加了margin-bottom.去掉即可

  .is-selected   z-index 1

   

  这个时候就可以了