uniapp微信小程序vue3自定义tabbar_uniapp 自定义tabbar

在App.vue隐藏原生tabbar，也可以在pages.json中配置

二选一就好了

创建 CustomTabBar 公共组件

<template> <view class=\"custom-tab-bar\" :style=\"{paddingBottom: safeAreaHeight + \'px\'}\"> <view class=\"tab-bar-item\" :class=\"{\'active\' : props.currentPage === index}\" v-for=\"(item, index) in tabBarList\" :key=\"index\"> <image v-if=\"props.currentPage === index\" :src=\"\'../\' + item.selectedIconPath\" @click.stop=\"switchTab(item)\"></image> <image v-else :src=\"\'../\' + item.iconPath\" @click.stop=\"switchTab(item)\"></image> <text>{{ item.text }}</text> </view> </view></template><script setup>import { ref, onMounted } from \'vue\';const props = defineProps({ currentPage: Number,})const tabBarList = ref([ { pagePath: \"pages/tabbar/msg\", iconPath: \"static/tabbar/dynamic.png\", selectedIconPath: \"static/tabbar/dynamic1.png\", text: \"动态\" }, { pagePath: \"pages/tabbar/static\", iconPath: \"static/tabbar/statistic.png\", selectedIconPath: \"static/tabbar/statistic1.png\", text: \"统计\" }, { pagePath: \"pages/tabbar/work\", iconPath: \"static/tabbar/work.png\", selectedIconPath: \"static/tabbar/work1.png\", text: \"工作台\" }, { pagePath: \"pages/tabbar/find\", iconPath: \"static/tabbar/find.png\", selectedIconPath: \"static/tabbar/find1.png\", text: \"发现\" }, { pagePath: \"pages/tabbar/user\", iconPath: \"static/tabbar/my.png\", selectedIconPath: \"static/tabbar/my1.png\", text: \"我的\" }]);// 切换 tab 的方法const switchTab = (item) => { uni.switchTab({ url: \'/\' + item.pagePath, })};let safeAreaHeight = ref(0);onMounted(() => { // 获取底部安全区域高度 uni.getSystemInfo({ success: (res) => { let sHeight = res.screenHeight; // 获取屏幕高度 let sTop = res.safeArea.bottom; // 获取安全区域底部高度 safeAreaHeight.value = sHeight - sTop; // 计算安全区域距离底部的高度 console.log(\'底部安全区域高度：\', safeAreaHeight.value); } }); uni.hideTabBar();});</script><style lang=\"scss\" scoped>.custom-tab-bar { position: fixed; z-index: 99; bottom: 0; left: 0; right: 0; display: flex; background-color: #ffffff; border-top: 1px solid #eeeeee; padding: 5px 0;}.tab-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #93A2B7; &.active { color: #24C597; } &:nth-child(3) image { margin-top: -18px; width: 80rpx; height: 80rpx; }}.tab-bar-item image { width: 24px; height: 24px;}.tab-bar-item text { font-size: 12px; margin-top: 6rpx;}</style>

在每个tabbar页面中引入组件