wanzai_school_app/components/tabber.vue

<template>
	<uv-tabbar :customStyle="customStyle" activeColor="#0061FF" inactiveColor="#A6A6A6" :value="activeIndex">
		<uv-tabbar-item v-for="(item, index) in tabList" :key="item.id" :text="item.text" :icon="item.icon" @click="handleChange(index, item)"></uv-tabbar-item>
	</uv-tabbar>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 导航栏数组
const tabList = ref([
	{
		id: 1,
		text: '访客预约',
		icon: 'account'
	},
	{
		id: 2,
		text: '到访代办',
		icon: 'file-text'
	},
	{
		id: 3,
		text: '预约记录',
		icon: 'clock'
	}
])

// 当前高亮索引
const activeIndex = ref(0)

// 导航栏样式
const customStyle = {
	height: '120rpx'
}

onLoad(() => {
	const i = uni.getStorageSync('Tab-activeIndex')
	i ? (activeIndex.value = i) : (activeIndex.value = 0)
})

// 切换导航栏回调
const handleChange = (index, item) => {
	if (index != activeIndex.value) {
		activeIndex.value = index
		uni.setStorageSync('Tab-activeIndex', activeIndex.value)

		if (item.icon === 'account') {
			uni.redirectTo({
				url: '/pagesReservation/reservation/reservation'
			})
		} else if (item.icon === 'file-text') {
			uni.redirectTo({
				url: '/pagesReservation/backlog/backlog'
			})
		} else if (item.icon === 'clock') {
			uni.redirectTo({
				url: '/pagesReservation/record/record'
			})
		}
	}
}
</script>

<style lang="scss" scoped></style>