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>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view v-for="item in tabItems" :index='item.index' class="action" @click="tabBarDidChange" :data-index="item.index">
				<view class="cuIcon-cu-image">
					<image :src="selectedIndex==item.index?item.image_selected:item.image" />
				</view>
				<view :class="selectedIndex==item.index?'text-red':'text-gray'"> {{ item.name }} </view>
			</view>
		</view>
	</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,
				tabItems: [
					{ '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) {
				this.selectedIndex = e.currentTarget.dataset.index
			}
		}
	}
</script>

<style>

</style>