baiyuApp/components/indexSubsection/indexSubsection.vue

<template>
	<view class="nav-subsection ">
		<view class="nav-subsection-active" :style="{left: subsectionLeft + 'px', width: subsectionWidth + 'px'}"></view>
		<view class="nav-subsection-item x-c" :style="{color: topNavId != 0 ? '#fff':''}" @click="handleTopNav(0)">首页</view>
		<view class="nav-subsection-item x-c" :style="{color: topNavId != 1 ? '#fff':''}" @click="handleTopNav(1)">健康</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topNavId: 0,
				subsectionLeft: 0,
				subsectionWidth: 0,
				navSubSize: {},
			}
		},
		methods: {
			handleTopNav(id) {
				this.topNavId = id
				uni.setStorageSync("indexTemplate",this.topNavId)
				this.updateIndicator(this.navSubSize[this.topNavId].width, this.navSubSize[this.topNavId].width);
			},
			selectorQuery() {
				this.topNavId = uni.getStorageSync("indexTemplate") || 0
				uni.createSelectorQuery().in(this).selectAll('.nav-subsection-item').boundingClientRect((rects) => {
				  rects.forEach((rect,index) => {
					this.navSubSize[index] = rect;
				  })
				  this.updateIndicator(this.navSubSize[this.topNavId].width, this.navSubSize[this.topNavId].width);
				}).exec();
			},
			updateIndicator(left, width) {
			  this.$emit('onChange',this.topNavId)
			  this.subsectionLeft = this.topNavId * left + uni.upx2px(6);
			  this.subsectionWidth = width;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.nav-subsection {
		@include u-flex(row, center, center);
		// background-color: rgba(255, 255, 255, 0.3);
		background-color: rgba(0, 0, 0, 0.1);
		padding: 6rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		position: relative;
		z-index: 2;
		&-item {
			min-width: 96rpx;
			min-height: 50rpx;
			padding: 0 16rpx;
			box-sizing: border-box;
			// line-height: 50rpx;
			text-align: center;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			color: #fff;
			color: #2583EB;
		}
		&-active {
			background: #fff;
			position: absolute;
			top: 6rpx;
			left: 6rpx;
			z-index: -1;
			// min-width: 96rpx;
			min-height: 50rpx;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			transition-duration: 0.2s;
			transition-property: left;
		}
	}
</style>