pages.json
As you can see above, I use the native tabbar, but the value is configured with pagepath, and the top navigation bar can be customized for the three homepages in the page. Of course, if you delete the custom line of code, it will switch to the native top navigation bar.
Let’s take a home page as a code demonstration: (the top custom navigation bar component and the bottom navigation bar component will be placed at the end)
The components in the picture below are not introduced, but easyCom is used. The official website explains in detail.
<template>
<div>
<tabbarTop :data="tabbarTopData"></tabbarTop>
<tabbarBottom :current="0"></tabbarBottom>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
data() {
return {
tabbarTopData: {
title: "家园首页"
}
}
},
components: {},
computed: {
...mapState(["hasLogin"])
},
onLoad() {},
onShow() {},
methods: {
}
}
</script>
<style lang="scss" scoped>
</style>uni.hideTabbar({})You need to add hidden native tabbar after the onLaunch and onShow methods in App.vue (because of compatibility issues, both places must be added)
Special attention needs to be paid to "navigationStyle": "default" which can only control whether the top navigation bar is customized, while the bottom navigation bar is controlled by the options in the picture below. If you want to hide it, you can hide it through uni.hideTabBar(). In fact, you are using the native one. The bottom navigation bar is just hidden through the API, and then a customized bottom navigation bar is written on each tabbar page.
Modify the size and
modify the u-tabbar and u-tabbar-item width and height as needed. These basic properties are in uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue and uni_modules/uview-ui/components/u- There are corresponding comments in tabbar-item/u-tabbar-item.vue, which are clearly written. Just modify them yourself.
To modify the height of u-tabbar, I use the depth selector, but I need to open an option in the custom bottom navigation bar component. The code of the custom bottom navigation bar component I encapsulated is as follows:
<template>
<div class="tabBox">
<u-tabbar :placeholder="false" :value="current?current:0" @change="tabbarChange" :safeAreaInsetBottom="true" :border="false">
<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" 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="评测">
<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>As for why to use the option option: read this article
If you also need to add a css effect that creates a shadow when the bottom navigation bar is pressed: Reference
Custom navigation bar encapsulated components:
<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>The follow-up product allows the tabbar to be set to five, and the middle one is set to be round and highlighted, as shown below:
Just use the depth selector to change the third item in the tabbar code encapsulated above:
