tabbar适配安卓端

gym-manage-uniapp/components/TabBar.vue

@@ -1,21 +1,23 @@
 <!-- components/TabBar.vue -->
 <template>
-  <view v-if="shouldShowTabBar" class="tab-bar">
-    <view
-      v-for="(tab, index) in tabs"
-      :key="tab.path"
-      :class="['tab-item', { active: currentActiveIndex === index }]"
-      hover-class="tab-item--hover"
-      @tap.stop="onTabTap(index)"
-    >
-      <!-- 判断是否使用字体图标（我的页面用字体，其他用图片） -->
-      <text 
-        v-if="tab.useFontIcon"
-        :class="['iconfont', tab.icon]"
-        class="tab-icon-font"
-		:style="{ fontSize: tab.fontSize}"
-      ></text>
-      <text class="tab-label">{{ tab.label }}</text>
+  <view v-if="shouldShowTabBar" class="tab-bar-wrapper">
+    <view class="tab-bar">
+      <view
+        v-for="(tab, index) in tabs"
+        :key="tab.path"
+        :class="['tab-item', { active: currentActiveIndex === index }]"
+        hover-class="tab-item--hover"
+        @tap.stop="onTabTap(index)"
+      >
+        <!-- 判断是否使用字体图标（我的页面用字体，其他用图片） -->
+        <text 
+          v-if="tab.useFontIcon"
+          :class="['iconfont', tab.icon]"
+          class="tab-icon-font"
+    			:style="{ fontSize: tab.fontSize}"
+        ></text>
+        <text class="tab-label">{{ tab.label }}</text>
+      </view>
     </view>
   </view>
 </template>
@@ -98,15 +100,22 @@ function checkShouldShow() {
 
 let routeWatcher = null
 let appRouteCallback = null
+let isNavigating = false
 
 onMounted(() => {
   syncActiveState()
   checkShouldShow()
-  // #ifdef APP-PLUS
+  // #ifndef MP-WEIXIN
+  // H5和其他平台使用轮询监听路由变化
   routeWatcher = setInterval(() => {
-    syncActiveState()
+    // 导航期间不更新状态，避免覆盖用户点击的索引
+    if (isNavigating) return
+    const newIndex = getActiveIndexFromRoute()
+    if (newIndex !== currentActiveIndex.value) {
+      currentActiveIndex.value = newIndex
+    }
     checkShouldShow()
-  }, 300)
+  }, 200)
   // #endif
   // #ifdef MP-WEIXIN
   if (typeof uni.onAppRoute === 'function') {
@@ -122,12 +131,17 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  // #ifdef APP-PLUS
-  if (routeWatcher) { clearInterval(routeWatcher) }
+  // #ifndef MP-WEIXIN
+  // H5和其他平台清理定时器
+  if (routeWatcher) { 
+    clearInterval(routeWatcher) 
+    routeWatcher = null
+  }
   // #endif
   // #ifdef MP-WEIXIN
   if (appRouteCallback && typeof uni.offAppRoute === 'function') {
     uni.offAppRoute(appRouteCallback)
+    appRouteCallback = null
   }
   // #endif
 })
@@ -184,9 +198,12 @@ function onTabTap(index) {
   const currentPath = TAB_ROUTES[currentActiveIndex.value]
   if (targetPath === currentPath) return
   console.log('Tab 点击:', index, targetPath)
+  // 立即更新状态
   currentActiveIndex.value = index
   emit('update:active', index)
   emit('tab-change', index)
+  // 设置导航标志，阻止轮询覆盖状态
+  isNavigating = true
   let timer = setTimeout(() => {
     uni.showLoading({ title: '加载中...', mask: true })
   }, 50)
@@ -203,7 +220,10 @@ function onTabTap(index) {
       uni.hideLoading()
       setTimeout(() => {
         isSwitching = false
+        isNavigating = false
+        // #ifdef MP-WEIXIN
         syncActiveState()
+        // #endif
         checkShouldShow()
       }, 100)
     }
@@ -215,11 +235,21 @@ function onTabTap(index) {
 // 引入字体图标 CSS（定义 @font-face）
 @import '/common/style/tabbar_icon/tabbar.css';
 
-.tab-bar {
+// 固定容器 - 确保TabBar始终在屏幕底部
+.tab-bar-wrapper {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.tab-bar-wrapper .tab-bar {
+  pointer-events: auto;
+}
+
+.tab-bar {
   height: 120rpx;
   background: white;
   backdrop-filter: blur(24px);
@@ -231,7 +261,14 @@ function onTabTap(index) {
   padding-bottom: env(safe-area-inset-bottom);
   box-shadow: 0 -4rpx 24rpx var(--tabbar-shadow);
   border-radius: 32rpx 32rpx 0 0;
-  z-index: 999;
+  /* 防闪烁优化 */
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  will-change: transform;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  perspective: 1000;
+  -webkit-perspective: 1000;
 }
 
 .tab-item {