Bläddra i källkod

fix: 修复 admin-h5 底部导航图标偏位与切换后高亮残留(Tab 页缓存复用导致)

skyline 3 dagar sedan
förälder
incheckning
e87d1992ac
2 ändrade filer med 17 tillägg och 18 borttagningar
  1. 5 0
      admin-h5/src/App.vue
  2. 12 18
      admin-h5/src/components/CustomTabBar.vue

+ 5 - 0
admin-h5/src/App.vue

@@ -77,6 +77,11 @@ page {
   animation: app-fade-in $uni-duration-enter $uni-ease-decelerate;
 }
 
+/* 带底部导航的页面不做整页淡入:底部导航是 fixed 定位于页面内,整页淡入会让导航栏在切换 Tab 时一起闪一下 */
+page:has(.tab-bar) {
+  animation: none;
+}
+
 /* 入场工具类:页面内元素可主动挂载 */
 .fade-up { animation: app-fade-up $uni-duration-motion $uni-ease-out-quint backwards; }
 .fade-in { animation: app-fade-in $uni-duration-enter $uni-ease-decelerate backwards; }

+ 12 - 18
admin-h5/src/components/CustomTabBar.vue

@@ -20,10 +20,14 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, getCurrentInstance } from 'vue'
+import { computed } from 'vue'
 import { hapticMedium } from '../utils/haptics.js'
 
-const instance = getCurrentInstance()
+const props = defineProps({
+  // 由页面传入当前选中项,作为唯一数据源
+  selected: { type: Number, default: 0 }
+})
+
 const activeColor = '#C6171E'
 const inactiveColor = '#8C8C8C'
 
@@ -34,20 +38,9 @@ const tabs = [
   { pagePath: '/pages/finance/index',text: '财务', icon: 'dollar' },
 ]
 
-const current = ref(0)
-
-const getCurrentRoute = () => {
-  const pages = getCurrentPages()
-  if (pages.length > 0) {
-    const route = '/' + pages[pages.length - 1].route
-    const idx = tabs.findIndex(t => t.pagePath === route)
-    if (idx !== -1) current.value = idx
-  }
-}
-
-onMounted(() => getCurrentRoute())
-
-watch(() => instance?.proxy?.$route, () => getCurrentRoute(), { immediate: true })
+// 激活态只派生自 selected,不在组件内维护可变状态:
+// Tab 页在 uni-app H5 下会被缓存复用,若本地改状态(如点击时乐观更新),离开再回来会残留成错误高亮
+const current = computed(() => props.selected)
 
 const switchTab = (tab, index) => {
   // 重复点击当前 Tab 不切换、不触发触感
@@ -107,10 +100,11 @@ const switchTab = (tab, index) => {
 }
 
 /* 双层图标:灰色/红色各渲染一份,src 永不切换,避免 image 重新解码导致的闪烁 */
+/* 盒子尺寸必须与图标(AppIcon size=24 → 24rpx)一致,否则绝对定位的图标会贴在盒子左上角而偏位 */
 .icon-stack {
   position: relative;
-  width: 48rpx;
-  height: 48rpx;
+  width: 24rpx;
+  height: 24rpx;
 }
 
 .icon-layer {