tabbar bug
This commit is contained in:
parent
1d611bee0b
commit
a9455ce98d
|
|
@ -69,8 +69,34 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
// 从 Vuex 获取全局高亮索引
|
||||
...mapState(['currentTabIndex', 'messageNum'])
|
||||
// 保留对消息数量的映射
|
||||
...mapState(['messageNum']),
|
||||
|
||||
// ========= 动态计算当前高亮索引 =========
|
||||
// 替代原先直接获取 Vuex 的方式,改为根据当前真实路由计算,解决刷新状态丢失问题
|
||||
currentTabIndex() {
|
||||
try {
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
if (pages && pages.length > 0) {
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 拼接当前页面路径(兼容不同平台获取路由的方式)
|
||||
const currentPath = '/' + (currentPage.route || currentPage.__route__);
|
||||
|
||||
// 在 tabbarList 中查找匹配当前路径的索引
|
||||
const index = this.tabbarList.findIndex(item => item.pagePath === currentPath);
|
||||
if (index !== -1) {
|
||||
return index;
|
||||
}
|
||||
}
|
||||
// 如果由于某些原因匹配不到,降级去取 Vuex 中的值(防止其他极端情况报错)
|
||||
return this.$store.state.currentTabIndex || 0;
|
||||
} catch (e) {
|
||||
return this.$store.state.currentTabIndex || 0;
|
||||
}
|
||||
}
|
||||
// =================================================
|
||||
},
|
||||
watch: {
|
||||
// 当 tabbarList 内容变化(如异步更新图标)时,强制重建组件
|
||||
|
|
@ -153,7 +179,7 @@ export default {
|
|||
const idx = parseInt(index, 10);
|
||||
if (isNaN(idx) || !this.tabbarList[idx]) return;
|
||||
|
||||
// 先更新全局高亮(立即生效)
|
||||
// 依然更新全局高亮,确保其他可能依赖 Vuex 状态的逻辑正常运行
|
||||
this.setCurrentTabIndex(idx);
|
||||
|
||||
// 跳转页面
|
||||
|
|
|
|||
Loading…
Reference in New Issue