i2-school-employee-uniapp/pages/index/index.vue

<template>
	<view>
		<tabbar-calendar v-if="selectedIndex == 0"></tabbar-calendar>
		<tabbar-message v-if="selectedIndex == 1"></tabbar-message>
		<tabbar-mine v-if="selectedIndex == 2"></tabbar-mine>
		<u-tabbar :value="selectedIndex" fixed placeholder safeAreaInsetBottom activeColor="#d81e06">
			<u-tabbar-item
				v-for="item in tabItems"
				:index="item.index"
				:text="item.name"
				:icon="selectedIndex == item.index ? item.image_selected : item.image"
				:class="selectedIndex==item.index?'text-red':'text-gray'"
				@click="tabBarDidChange"
			></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
import TabbarMine from '../mine/index.vue';
import TabbarCalendar from '../calendar/index.vue';
import TabbarMessage from '../message/index.vue';
export default {
	components: {
		TabbarMine,
		TabbarCalendar,
		TabbarMessage
	},
	data() {
		return {
			PageCur: 'calendar',
			selectedIndex: 0
		};
	},
	computed: {
		tabItems() {
			return [
				{ index: 0, name: this.$i18n.t('calendar'), image: '/static/tabbar/calendar.png', image_selected: '/static/tabbar/calendar_active.png' },
				{ index: 1, name: this.$i18n.t('message'), image: '/static/tabbar/message.png', image_selected: '/static/tabbar/message_active.png' },
				{ index: 2, name: this.$i18n.t('me'), image: '/static/tabbar/me.png', image_selected: '/static/tabbar/me_active.png' }
			];
		}
	},
	methods: {
		tabBarDidChange(e) {
			console.log(e)
			this.selectedIndex = e;
		}
	}
};
</script>

<style></style>