当前位置：首页 > news >正文

uniapp微信小程序vue3自定义tabbar

news 2025/8/24 8:42:48

在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>