cyzh-SoundOfMusic-H5/components/basic/bottom-bar.vue

<template>
	<view>
		<view class="cu-bar tabbar bg-white">
			<view class="action" @click="change(0)">
				<view class="cuIcon-cu-image">
					<block v-if="current == 0">
						<view class="cuIcon-discoverfill theme-color"></view>
					</block>
					<block v-else>
						<view class="cuIcon-discoverfill "></view>
					</block>
				</view>
				<view :class="current == 0 ? 'selectColor':''">活动</view>
			</view>
			<view class="action" @click="change(1)">
				<view class="cuIcon-cu-image">
					<block v-if="current == 1">
						<view class="cuIcon-goodsfill theme-color"></view>
					</block>
					<block v-else>
						<view class="cuIcon-goodsfill"></view>
					</block>
				</view>
				<view :class="current == 1 ? 'selectColor':''">花积分</view>
			</view>
			<view class="action" @click="change(2)">
				<view class="cuIcon-cu-image">
					<block v-if="current == 2">
						<view class="cuIcon-friendfill theme-color"></view>
					</block>
					<block v-else>
						<view class="cuIcon-friendfill"></view>
					</block>
				</view>
				<view :class="current == 2 ? 'selectColor':''">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
			};
		},
		props: {
			
		},
		methods: {
			change(index) {
				this.current = index;
				this.$emit("onTap",index);
			},
		}
	}
</script>

<style>
.selectColor {
	color: #583ce6;
}
</style>