一、 效果

二、新建tabbar页面

三 、page.json配置tabbar

"tabBar": {
"color": "#ffffff",
"selectedColor": "#6777FD",
"custom": true,
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/static/logo.png",
"selectedIconPath": "/static/logo.png"
},
{
"pagePath": "pages/code/code",
"text": "扫码",
"iconPath": "/static/logo.png",
"selectedIconPath": "/static/logo.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/static/logo.png",
"selectedIconPath": "/static/logo.png"
}
]
},

四、自定义组件

把菜单数据定义在data里，然后遍历渲染

路径

<template>
<view class="tab-bar">
<!-- 循环每个 item 菜单 -->
<!-- 定义两个class，一个是默认的样式tab-bar-item，一个是中间凸起的样式code-->
<view v-for="(item,index) in tabBarList" :key="index" :class="{'tab-bar-item': item.id!=1,code:item.id==1}"
@click="switchTab(item, index)">
<view class="tab_text" :style="{color: selected == index ? selectedColor : color}">
<!-- 图标，当前选中就是selectedIconPath，否则就是默认的iconPath-->
<image class="tab_img" :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
<!-- 中间菜单不显示文字，index不是1的显示文字-->
<template v-if="index!==1">
<view>{{ item.text }}</view>
</template>
</view>
</view>
</view>
</template>
<script setup>
import { defineProps, ref } from 'vue'
// 子组件传递参数
const props = defineProps({
selected: {
type: Number,
default: 0
}
})
// 默认颜色
let color = ref('#000')
// 选中的颜色
let selectedColor = ref('#ffb2b2')
// 菜单栏集合 - 与 pages.json -> tabbar 配置一样
let tabBarList = ref([{
"id": 0,
"pagePath": "/pages/index/index",
"iconPath": "../../static/logo.png",
"selectedIconPath": "../../static/logo.png",
"text": "首页"
},
{
"id": 1,
"pagePath": "/pages/code/code",
"iconPath": "../../static/logo.png",
"selectedIconPath": "../../static/logo.png",
"text": "扫码"
},
{
"id": 2,
"pagePath": "/pages/my/my",
"iconPath": "../../static/logo.png",
"selectedIconPath": "../../static/logo.png",
"text": "我的"
}
])
// 隐藏原生TabBar
uni.hideTabBar();
// 跳转tabBar菜单栏
const switchTab = (item) => {
let url = item.pagePath;
uni.switchTab({
url
})
}
</script>
<style lang="less" scoped>
// 外部装修
.tab-bar {
position: fixed;
bottom: 0;
left: 0rpx;
right: 0rpx;
height: 100rpx;
background: white;
padding: 10rpx;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 15px rgba(165, 168, 171, 0.83) !important;
// 给每个 item 设置样式
.tab-bar-item {
//flex: 0.5;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 150rpx;
padding: 15rpx;
background-color: transparent;
transition: all 0.5s ease-in-out;
margin: auto;
// 限制每个icon的大小
.tab_img {
width: 37rpx;
height: 41rpx;
}
// 限制文字大小
.tab_text {
font-size: 20rpx;
margin-top: 9rpx;
flex: 1;
}
}
//中间凸起扫码
.code {
position: relative;
top: -60rpx;
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
background-color: #2b9939;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
// 限制每个icon的大小
.tab_img {
width: 70rpx;
height: 78rpx;
}
}
}
</style>

五、组件中使用

index.vue

<template>
index
<tabbar selected="0"></tabbar>
</template>
<script>
import tabbar from "../../components/tabbar/tabbar.vue";
</script>
<style>
</style>

code.vue

<template>
code
<tabbar selected="1"></tabbar>
</template>
<script setup>
import tabbar from "../../components/tabbar/tabbar.vue";
</script>
<style lang="scss">
</style>

my.vue

<template>
index<tabbar selected="2"></tabbar>
</template>
<script>
import tabbar from "../../components/tabbar/tabbar.vue";
</script>
<style lang="scss">
</style>