uniapp 自定义tabbar栏 vue3 ts setup

原创已于 2025-10-18 23:03:41 修改 · 963 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #javascript

于 2025-10-17 22:30:51 首次发布

参考uniapp官方链接

重点内容为

自定义tabBar组件应需而生，它仍然读取 pages.json 里配置的tabBar信息，但这个组件可以自定义摆放的位置，可以灵活的配置各种css。
该组件支持 pages.json 中 tabBar 相关配置（兼容性和 H5 保持一致），其中不支持 borderStyle 配置。
该组件支持所有 tabBar 相关 API，例如设置 tab 徽标、显示红点、以及 switchTab 等。

就是你自定义可以但还是需要读取pages.json中的配置，你可以做一些样式的修改，还是支持tabbar官方的api所以跳转什么的还是uni.switchTab ，
另外还有一点就是import pagesJson from ‘@/pages.json’; 我是直接获取的可以的话也可以在app.vue中做tabbar list的缓存，但是还是需要每次获取一下，获取不到再从导入的pagesJson获取，我觉得意义不大，就没这样做

<template>
	<view class="navbar" :style="{bottom:bottom+'rpx'}">
		<view class="navbar-box">
			<view class="item" v-for="(item,index) in tabBarList" :key="index" @tap="goToTabBar(item)">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onReady, onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import pagesJson from '@/pages.json';

	interface TabBarItem {
		iconPath ?: string;
		selectedIconPath ?: string;
		pagePath : string;
		text : string;
	}

	const tabBarList = ref<TabBarItem[]>([])

	const goToTabBar = (item : TabBarItem) => {
		uni.switchTab({
			url: '/' + item.pagePath,
			success: () => {
				uni.hideTabBar({
					success: () => {
						uni.setStorageSync('tabHide', true)
					}
				})
			}
		})
	}
	
	const bottom = ref(0)

	onShow(async () => {
		tabBarList.value = pagesJson?.tabBar?.list ?? []
		const tabHide = uni.getStorageSync('tabHide')
		if (!tabHide) {
			bottom.value = 0
			goToTabBar(pagesJson.tabBar.list[0])
		}else{
			uni.hideTabBar()
			bottom.value = 100
		}

	})
</script>

<style scoped>
	.navbar {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		z-index: 9999;
		left: 0;
		bottom: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.navbar-box {
		width: calc(100% - 40rpx);
		height: 100%;
		background: rgba(52, 90, 250, .04);
		border-radius: 32rpx;
		backdrop-filter: blur(5rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.navbar-box .item {
		flex: 1;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>