|
|
@@ -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 {
|