pages.json
?上面可以看到tabbar我使用的原生的，但是值配置了pagepath，并且page里三個(gè)首頁(yè)都可以自定義頂部導(dǎo)航欄，當(dāng)然如果刪掉custom那一行代碼，就切換成原生頂部導(dǎo)航欄了。
下面拿一個(gè)首頁(yè)作為代碼演示：（頂部自定義導(dǎo)航欄組件和底部導(dǎo)航欄組件會(huì)放在最后）
下圖組件沒(méi)有引入,是使用了easyCom,官網(wǎng)詳解
<template>
<div>
<tabbarTop :data="tabbarTopData"></tabbarTop>
<tabbarBottom :current="0"></tabbarBottom>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
data() {
return {
tabbarTopData: {
title: "家園首頁(yè)"
}
}
},
components: {},
computed: {
...mapState(["hasLogin"])
},
onLoad() {},
onShow() {},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>需要在App.vue中onLaunch和onShow方法后面加上uni.hideTabbar({})隱藏原生tabbar(因?yàn)榧嫒菪詥?wèn)題兩個(gè)地方必須都加上)
?特別需要留意的"navigationStyle": "default" 只能控制頂部導(dǎo)航欄是否自定義，而底部導(dǎo)航欄是由下圖選項(xiàng)控制，如果要隱藏可以通過(guò)?? uni.hideTabBar()? 隱藏掉，其實(shí)就是使用原生的底部導(dǎo)航欄，只不過(guò)通過(guò)api隱藏掉，然后每個(gè)tabbar頁(yè)面都寫(xiě)上自定義的底部導(dǎo)航欄，
?修改大小
根據(jù)需要修改了u-tabbar和u-tabbar-item寬度高度，這些基本屬性在uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue和uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue中都有相應(yīng)的注釋?zhuān)瑢?xiě)得很清楚，自行修改就好
修改u-tabbar的高度，我使用的是深度選擇器，只不過(guò)需要在自定義底部導(dǎo)航欄組件里面開(kāi)啟一個(gè)option，我封裝的自定義底部導(dǎo)航欄組件代碼如下：
<template>
<div class="tabBox">
<u-tabbar :placeholder="false" :value="current?current:0" @change="tabbarChange" :safeAreaInsetBottom="true" :border="false">
<u-tabbar-item text="首頁(yè)">
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/img/橘子.svg">
</image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/布丁.svg">
</image>
</u-tabbar-item>
<u-tabbar-item text="案例">
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/img/煎蛋.svg">
</image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/冰淇淋.svg">
</image>
</u-tabbar-item>
<u-tabbar-item text=" ">
<image class="u-page__item__slot-icon shopTabar" slot="active-icon" src="@/static/img/香蕉.svg">
</image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/胡蘿卜.svg">
</image>
</u-tabbar-item>
<u-tabbar-item text="評(píng)測(cè)">
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/img/香蕉.svg">
</image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/胡蘿卜.svg">
</image>
</u-tabbar-item>
<u-tabbar-item text="我的">
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/img/香蕉.svg">
</image>
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/胡蘿卜.svg">
</image>
</u-tabbar-item>
</u-tabbar>
</div>
</template>
<script>
export default {
options: { styleIsolation: 'shared' },
data() {
return {
list: [
{ path: "pages/home/index" },
{ path: "pages/caseStory/index" },
{ path: "pages/shop/index" },
{ path: "pages/evaluation/index" },
{ path: 'pages/user/index' },
]
}
},
props: {
current: Number
},
components: {},
onLoad() {
},
onShow() {
},
methods: {
tabbarChange(e) {
console.log(e, '/' + this.list[e].path);
uni.switchTab({
url: '/' + this.list[e].path
})
}
}
}
</script>
<style lang="scss" scoped>
.u-page__item__slot-icon {
width: 54rpx;
height: 54rpx;
}
.tabBox {
::v-deep .u-tabbar__content__item-wrapper {
height: 163rpx;
}
::v-deep .u-tabbar__content__item-wrapper .u-tabbar-item:nth-child(3) .u-page__item__slot-icon {
width: 102rpx;
height: 102rpx;
}
}
</style>至于為什么使用option選項(xiàng)：看這篇文章
如果還需要添加底部導(dǎo)航欄按下出現(xiàn)陰影的css效果：參考
自定義導(dǎo)航欄封裝的組件：
<template>
<div>
<u-navbar :title="data.title" :safeAreaInsetTop="true" :fixed="true">
<view class="u-nav-slot" slot="left">
<u-icon name="home" size="40"></u-icon>
</view>
</u-navbar>
</div>
</template>
<script>
export default {
data() {
return {
}
},
props: {
data: Object
},
components: {},
onMounted() {
},
onShow() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
::v-deep.u-navbar__content__left {
.uicon-home {
font-size: 80rpx !important;
}
}
</style>后續(xù)產(chǎn)品讓把tabbar設(shè)置成五個(gè)，中間的一個(gè)設(shè)置為圓的并且突出顯示，如下圖：
只需要在上面封裝的tabbar代碼里面用深度選擇器改一下第三個(gè)item：
?
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-408963.html
還有一種方案 切換tabbar的時(shí)候并未跳轉(zhuǎn)頁(yè)面，而是把tabbar頁(yè)面分別封裝成了組件 在切換組件。（豌豆拼車(chē)小程序 貌似就是這種）?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-408963.html
到了這里，關(guān)于uni-app 使用 Uview2.x 搭建自定義tabbar組件，自定義navbar，還會(huì)解決自定義導(dǎo)航欄引起閃爍性能差的問(wèn)題?。?！的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
