tabbar激活

components/tabbar/tabbar.vue

 <template>
 	<view class="tabbar">
-		<view class="item" @click="go('/pages/home/home')">
+		<view class="item" :class="{ active: page.indexOf('home') > -1 }" @click="go('/pages/home/home')">
 			<image class="icon" src="@/static/icon-home.png" mode="aspectFit"></image>
 			<view class="name">{{ $t('Home') }}</view>
 		</view>
-		<view class="item" @click="go('/pages/chat/chat')">
+		<view class="item" :class="{ active: page.indexOf('chat') > -1 }" @click="go('/pages/chat/chat')">
 			<image class="icon" src="@/static/icon-chat.png" mode="aspectFit"></image>
 			<view class="name">{{ $t('Astrologer') }}</view>
 		</view>
-		<view class="item" @click="go('/pages/user/user')">
+		<view class="item" :class="{ active: page.indexOf('user') > -1 }" @click="go('/pages/user/user')">
 			<image class="icon" src="@/static/icon-user.png" mode="aspectFit"></image>
 			<view class="name">{{ $t('Profile') }}</view>
 		</view>
@@ -19,16 +19,21 @@
 	export default {
 		name: "tabbar",
 		data() {
-			return {};
+			return {
+				page: '', // 当前页面路径
+				active: '', // 激活按钮
+			};
 		},
 		beforeCreate() {
 			uni.hideTabBar();
 		},
+		created() {
+			const pages = getCurrentPages();
+			this.page = pages[pages.length - 1].route;
+		},
 		methods: {
 			go(url) {
-				const pages = getCurrentPages();
-				const page = pages[pages.length - 1].route;
-				if (url.indexOf(page) > -1) return;
+				if (url.indexOf(this.page) > -1) return;
 				uni.switchTab({ url })
 			},
 		},
@@ -56,6 +61,7 @@
 			justify-content: center;
 			align-items: center;
 			gap: 12rpx;
+			opacity: 0.7;
 
 			.icon {
 				width: 46rpx;
@@ -68,5 +74,9 @@
 				color: #FFFFFF;
 			}
 		}
+		
+		.item.active {
+			opacity: 1;
+		}
 	}
 </style>
\ No newline at end of file