zjrs-jeecgBoot/.docs/20260616-小程序企业端TabBar切换修复记录.md

小程序企业端底部TabBar切换不丝滑修复记录

修改日期

2026-06-16

问题描述

小程序企业端底部页面切换按钮点击后不够丝滑，点击"企业中心"后显示的是"主页"的高亮状态，Tab切换状态与实际页面不一致。

问题原因

自定义TabBar组件（custom-tab-bar/index.tsx）中，useDidShow 钩子通过 Taro.getCurrentPages() 检测当前页面来设置Tab高亮状态。但在Tab切换过程中存在时序问题：

1. 用户点击"企业中心"Tab，handleSwitch(2) 被调用
2. setCurrent(2) 正确设置了高亮状态
3. Taro.switchTab() 开始异步导航
4. useDidShow 触发，但此时 Taro.getCurrentPages() 可能仍返回旧页面（企业主页）
5. 检测逻辑找到旧页面对应的索引0（主页），调用 setCurrent(0) 覆盖了正确的状态
6. 结果：TabBar高亮状态被错误地重置为"主页"

修复方案

在点击Tab切换时，通过 Taro.setStorageSync 存储目标Tab索引。useDidShow 中优先读取存储的索引，避免 getCurrentPages() 返回旧数据导致状态被错误覆盖。存储的索引使用后立即清除，不影响其他场景（如首次进入、从子页面返回）的页面路由检测逻辑。

修改文件

1. src/custom-tab-bar/index.tsx

新增常量：

// 点击Tab切换时存储目标索引的key，用于解决useDidShow中getCurrentPages()返回旧数据的问题
const TAB_SWITCH_INDEX_KEY = '_tabSwitchIndex'

修改 useDidShow 逻辑：

• 优先读取 Storage 中存储的切换索引，有则使用并清除
• 无存储索引时，回退到原有的页面路由检测逻辑（适用于首次进入、子页面返回等场景）

修改 handleSwitch 逻辑：

• 点击Tab时先将目标索引存入 Storage，再设置状态和调用 switchTab

影响范围

• 仅修改自定义TabBar组件内部逻辑
• 不影响其他业务功能
• 个人端和企业端TabBar切换均受益于此修复