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

修改日期

2026-06-16

问题描述

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

问题原因

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

用户点击"企业中心"Tab，handleSwitch(2) 被调用
setCurrent(2) 正确设置了高亮状态
Taro.switchTab() 开始异步导航
useDidShow 触发，但此时 Taro.getCurrentPages() 可能仍返回旧页面（企业主页）
检测逻辑找到旧页面对应的索引0（主页），调用 setCurrent(0) 覆盖了正确的状态
结果：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切换均受益于此修复

20260616-小程序企业端TabBar切换修复记录.md 2.0 KB تاريخچه خام