OmniCard/mpuniapp/pages/tabBar/tab-bar.uvue

<template>
	<uni-tab class="tab-page-root" :style="{ height: tabPageHeight + 'px' }" :active-index="activeIndex" @change="handleChange">
		<!-- 内容区域 -->
		<view class="tab-content-stage">
			<uni-tab-content>
				<componenttab />
			</uni-tab-content>
			<uni-tab-content>
				<apitab />
			</uni-tab-content>
			<uni-tab-content>
				<csstab />
			</uni-tab-content>
			<uni-tab-content>
				<uniuitab />
			</uni-tab-content>
			<uni-tab-content>
				<templatetab />
			</uni-tab-content>
		</view>

		<!-- 底部选项卡 -->
		<uni-tab-bar :style="{ backgroundColor: tabBarBgColor }">
			<!-- 图标高度24，文字字号10px。如需角标，在 <uni-tab-item> 上设置 badge-text="99+" -->
			<uni-tab-item>
				<image :src="activeIndex == 0 ? '/static/componentHL.png' : '/static/component.png'" class="tab-icon-image" flatten></image>
				<text class="tab-label" :class="[activeIndex == 0 ? 'tab-label-active' : '', darkTextClass]" flatten>组件</text>
			</uni-tab-item>
			<uni-tab-item>
				<image :src="activeIndex == 1 ? '/static/apiHL.png' : '/static/api.png'" class="tab-icon-image" flatten></image>
				<text class="tab-label" :class="[activeIndex == 1 ? 'tab-label-active' : '', darkTextClass]" flatten>API</text>
			</uni-tab-item>
			<uni-tab-item>
				<image :src="activeIndex == 2 ? '/static/cssHL.png' : '/static/css.png'" class="tab-icon-image" flatten></image>
				<text class="tab-label" :class="[activeIndex == 2 ? 'tab-label-active' : '', darkTextClass]" flatten>CSS</text>
			</uni-tab-item>
			<uni-tab-item>
				<image :src="activeIndex == 3 ? '/static/extuiHL.png' : '/static/extui.png'" class="tab-icon-image" flatten></image>
				<text class="tab-label" :class="[activeIndex == 3 ? 'tab-label-active' : '', darkTextClass]" flatten>uni-ui</text>
			</uni-tab-item>
			<uni-tab-item>
				<image :src="activeIndex == 4 ? '/static/templateHL.png' : '/static/template.png'" class="tab-icon-image" flatten></image>
				<text class="tab-label" :class="[activeIndex == 4 ? 'tab-label-active' : '', darkTextClass]" flatten>模板</text>
			</uni-tab-item>
		</uni-tab-bar>
	</uni-tab>
</template>

<script setup lang="uts">
	import componenttab from './component.uvue'
	import apitab from './API.uvue'
	import csstab from './CSS.uvue'
	import templatetab from './template.uvue'
	import uniuitab from './uni-ui.uvue'
	import { state } from '@/store/index.uts'

	const tabPageHeight = ref<number>(uni.getWindowInfo().windowHeight)
	const activeIndex = ref<number>(0)
	const currentPage = getCurrentInstance()?.proxy?.$page
	const darkTextClass = computed((): string => {
		return state.isDarkMode ? 'tab-label-dark' : ''
	})

	const tabBarBgColor = computed((): string => {
		return state.isDarkMode ? '#1F1F1F' : '#F8F8F8'
	})

	function syncAndroidNavigationStyle() : void {
		// #ifdef APP-ANDROID
		const pages = getCurrentPages()
		if (pages.length == 0 || currentPage == null) {
			return
		}
		currentPage.setPageStyle({
			androidThreeButtonNavigationBackgroundColor: tabBarBgColor.value,
			androidThreeButtonNavigationStyle: state.isDarkMode ? 'white' : 'black'
		})
		// #endif
	}

	function syncTabPageHeight() : void {
		tabPageHeight.value = uni.getWindowInfo().windowHeight
	}

	watch((): boolean => state.isDarkMode, () => {
		syncAndroidNavigationStyle()
	})

	onResize(() => {
		syncTabPageHeight()
	})

	onReady(() => {
		syncTabPageHeight()
		syncAndroidNavigationStyle()
	})

	// uni-tab-item 点击后由 <uni-tab> 抛出 change 事件，携带新激活的索引
	function handleChange(index : number) : void {
		activeIndex.value = index
		switch (index) {
			case 0:
				uni.setNavigationBarTitle({ title: '组件' })
				break
			case 1:
				uni.setNavigationBarTitle({ title: 'API' })
				break
			case 2:
				uni.setNavigationBarTitle({ title: 'CSS' })
				break
			case 3:
				uni.setNavigationBarTitle({ title: 'uni-ui' })
				break
			case 4:
				uni.setNavigationBarTitle({ title: '模板' })
				break
		}
	}
</script>

<style>
	.tab-page-root {
		width: 100%;
		flex: 1;
	}

	.tab-content-stage {
		width: 100%;
		flex: 1;
		min-height: 0px;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}

	.tab-icon-image {
		height: 24px;
		width: 24px;
	}

	.tab-label {
		font-size: 10px;
    color: rgb(122, 126, 131);
	}

	.tab-label-dark {
		color: #CACACA;
	}

	.tab-label-active {
		color: #007aff;
	}
</style>