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

     

    这个时候就可以了

版权声明：本文为qq_31001061原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。