cyzh-SoundOfMusic-H5/components/basic/bottom-bar-index.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 style="height: 42upx;">
							<image src="/static/ldt/bottomBar/home_actived.png" style="width: 36upx;height: 35upx;"></image>
						</view>
					</block>
					<block v-else>
						<view style="height: 42upx;">
							<image src="/static/ldt/bottomBar/home.png" style="width: 36upx;height: 35upx;"></image>
						</view>
					</block>
				</view>
				<view :class="current == 0 ? 'text-black':'text-gray'">首页</view>
			</view>
			<view class="action" @click="change(1)">
				<view class="cuIcon-cu-image">
					<block v-if="current == 1">
						<view style="height: 42upx;">
							<image src="/static/ldt/bottomBar/points_actived.png" style="width: 39upx;height: 37upx;"></image>
						</view>
					</block>
					<block v-else>
						<view style="height: 42upx;">
							<image src="/static/ldt/bottomBar/points.png" style="width: 39upx;height: 37upx;"></image>
						</view>
					</block>
				</view>
				<view :class="current == 1 ? 'text-black':'text-gray'">花积分</view>
			</view>
			<view class="action" @click="change(2)">
				<view class="cuIcon-cu-image">
					<block v-if="current == 2">
						<view style="height: 42upx;">
							<image src="/static/ldt/bottomBar/earn_actived.png" style="width: 39upx;height: 40upx;"></image>
						</view>
					</block>
					<block v-else>
						<view style="height: 42upx;">
							<image src="/static/ldt/bottomBar/earn.png" style="width: 39upx;height: 40upx;"></image>
						</view>
					</block>
				</view>
				<view :class="current == 2 ? 'text-black':'text-gray'">赚积分</view>
			</view>
			<view class="action" @click="change(3)">
				<view class="cuIcon-cu-image">
					<block v-if="current == 3">
						<view style="height: 42upx;">
							<image src="/static/ldt/bottomBar/mine_actived.png" style="width: 32upx;height: 37upx;"></image>
						</view>
					</block>
					<block v-else>
						<view style="height: 42upx;">
							<image src="/static/ldt/bottomBar/mine.png" style="width: 32upx;height: 37upx;"></image>
						</view>
					</block>
				</view>
				<view :class="current == 3 ? 'text-black':'text-gray'">我的</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>

</style>