officialAccount/pages/index/index.vue

<template>
	<view class="login-container">
		<!-- 底部的栏，为啥这样写，是因为要做左右拉动 -->
		<view class="botton-view">
			<view v-for="(item,index) in itemArray" class="array-father">
				<view :class="itemTarget===index ? `bottom-button-target` : `bottom-button`" @click="itemTarget=index">
					<view class="">
						{{item}}
					</view>
				</view>
				<view v-show="itemTarget===index" class="blue-heng"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const itemArray = ["NU", "动态", "我的"];
	const itemTarget = ref(0);
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: rgb(239, 241, 252);
		position: relative;
	}

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

	.botton-view {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 200rpx;
		width: 100%;
		// background-color: greenyellow;
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		
		.bottom-button {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bottom-button-target {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgb(42, 133, 235);
		}

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