Explorar el Código

fix: admin-h5 底部导航切换图标闪烁,改为双层图标交叉过渡

选中态切换 color/size 导致 image data-URI src 变化、webview 重新解码产生闪白。改为灰色/红色双层图标常驻,src 永不切换,选中动效用透明度+弹性缩放过渡,同时固定尺寸消除布局抖动。
skyline hace 3 días
padre
commit
2e2a81095d
Se han modificado 1 ficheros con 32 adiciones y 9 borrados
  1. 32 9
      admin-h5/src/components/CustomTabBar.vue

+ 32 - 9
admin-h5/src/components/CustomTabBar.vue

@@ -7,12 +7,11 @@
       @click="switchTab(tab, index)"
     >
       <view class="tab-inner" :class="{ active: current === index }">
-        <view class="tab-icon" :class="{ active: current === index }">
-          <AppIcon
-            :name="tab.icon"
-            :size="current === index ? 24 : 22"
-            :color="current === index ? activeColor : inactiveColor"
-          />
+        <view class="tab-icon">
+          <view class="icon-stack">
+            <AppIcon class="icon-layer base" :name="tab.icon" :size="24" :color="inactiveColor" />
+            <AppIcon class="icon-layer active-layer" :name="tab.icon" :size="24" :color="activeColor" />
+          </view>
         </view>
         <text class="tab-text" :class="{ active: current === index }">{{ tab.text }}</text>
       </view>
@@ -106,9 +105,33 @@ const switchTab = (tab, index) => {
   align-items: center;
   justify-content: center;
 }
-/* 选中图标弹性放大入场 */
-.tab-icon.active {
-  animation: app-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+/* 双层图标:灰色/红色各渲染一份,src 永不切换,避免 image 重新解码导致的闪烁 */
+.icon-stack {
+  position: relative;
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.icon-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.icon-layer.active-layer {
+  opacity: 0;
+  transform: scale(0.55);
+}
+
+.tab-inner.active .icon-layer.base {
+  opacity: 0;
+}
+
+.tab-inner.active .icon-layer.active-layer {
+  opacity: 1;
+  transform: scale(1);
 }
 
 .tab-text {