hldy_xcx/compontent/public/oldmandownmenu.vue

<template>
	<!-- 底部的栏，为啥这样写，是因为要做左右拉动 -->
	<view class="botton-view">
		<view v-for="(item,index) in itemArray" :key="index" class="array-father">
			<view :class="itemTarget===index ? `bottom-button-target` : `bottom-button`" @click="jumpto(index)">
				<donghua :width="`60rpx`" :height="`60rpx`" :links="donghuaArray[index]" :playing="playing==index"
					:interval="50" />
				<view class="bottom-text">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		genPaths
	} from '@/compontent/public/issame.js'

	const props = defineProps({
		itemTarget: {
			type: Number,
			required: true, // 如果必须传
			default: -1 // 如果您想给默认值
		}
	})

	const playing = ref(-1);
	const photoplay = ref(false);
	const itemArray = ["NU", "动态", "我的"];
	const donghuaArray = [genPaths(
		'/static/donghua/home',
		'home',
		19, // 张数
		'png',
		0, // 起始索引
		false // 不补零
	), genPaths(
		'/static/donghua/new',
		'new',
		18, // 张数
		'png',
		0, // 起始索引
		false // 不补零
	), genPaths(
		'/static/donghua/my',
		'my',
		14, // 张数
		'png',
		0, // 起始索引
		false // 不补零
	)]

	onMounted(() => {
		photoplay.value = true;
		playing.value = props.itemTarget
	})
	const jumpto = (index) => {
		if (index != props.itemTarget) {
			switch (index) {
				case 0:
					uni.reLaunch({
						url: `/pages/oldmanindex/index`
					});
					break;
				case 1:


					break;
				case 2:
					uni.reLaunch({
						url: `/pages/oldmanindex/mine`
					});
					break;
			}

		}
	}
</script>
<style lang="scss" scoped>
	.botton-view {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 120rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		z-index: 9999;

		.bottom-button {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.bottom-button-target {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #01a8ff;
			flex-direction: column;
		}

		.blue-heng {
			height: 6rpx;
			width: 150rpx;
			background-color: rgb(42, 133, 235);
			position: absolute;
			bottom: 55rpx;
			left: 50%;
			/* 左边缘到父容器左边的距离占父宽度 50% */
			transform: translateX(-50%);
		}
	}

	.array-father {
		width: 33%;
		position: relative;

	}

	.botton-img {
		width: 38rpx;
		height: 38rpx;
		margin-bottom: 5rpx;
	}

	.bottom-text {
		margin-top: -15rpx;
	}
</style>