- 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
这个时候就可以了
mint-ui的navbar导航栏的填坑
最新推荐文章于 2024-07-28 21:55:01 发布