uni-app在app端调用uni.setTabBarItem后，再触发onTabItemTap获取的不是uni.setTabBarItem设置的text

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app在app端调用uni.setTabBarItem后，再触发onTabItemTap获取的不是uni.setTabBarItem设置的text

示例代码：

先执行：uni.setTabBarItem({   
      index: 0,  
      text: '回顶部' ,  
      selectedIconPath: isTop ? 'static/tabBar/home-top.png' : '/static/tabBar/home-selected.png'  
    })  
再获取：  
onTabItemTap(e){  
    const { text } = e  
    console.error('eee', e)  
  },

操作步骤：

方法执行：  
uni.setTabBarItem({   
      index: 0,  
      text: '回顶部' ,  
      selectedIconPath: isTop ? 'static/tabBar/home-top.png' : '/static/tabBar/home-selected.png'  
    })  
点击tab执行：  
onTabItemTap(e){  
    const { text } = e  
    console.error('eee', e)  
  },

预期结果：

打印text为“回顶部”

实际结果：

打印text非“回顶部”

bug描述：

先执行：uni.setTabBarItem({   
      index: 0,  
      text: '回顶部' ,  
      selectedIconPath: isTop ? 'static/tabBar/home-top.png' : '/static/tabBar/home-selected.png'  
    })  
再获取：  
onTabItemTap(e){  
    const { text } = e  
    console.error('eee', e)  
  },

打印的文字内容不是“回顶部”，而是原来老内容


| 信息类型       | 信息内容     |
|----------------|--------------|
| 产品分类       | uniapp/App   |
| PC开发环境     | Windows      |
| PC开发环境版本 | win11        |
| 手机系统       | Android      |
| 手机系统版本   | Android 14   |
| 手机厂商       | 小米         |
| 手机机型       | 红米k40s     |
| 页面类型       | vue          |
| vue版本        | vue2         |
| 打包方式       | 云端         |
| 项目创建方式   | CLI          |
| CLI版本号      | 4.24         |

Harmonyos Next教程
10 回复

你好，请完整给一下你的代码，包含相关代码的执行周期以及说明isTop


下边写了个demo，你试下，onTabItemTap里面的打印，和onHide都有问题

<template> <view> <button :style="{ marginTop: '100rpx' }" @click="click" >点击事件</button> </view> </template> <script> export default { data() { return {} }, components: {}, onTabItemTap(e) { const { text } = e console.error('text', text) }, onHide(){ uni.setTabBarItem({ index: 0, text: '测试' }) }, methods: { click(){ const a = true uni.setTabBarItem({ index: 0, text: a ? '回顶部' : '首页', }) } } } </script>

你试一下再onHide中延迟一下执行

回复 DCloud_UNI_yuhe: 先说第一个问题：click事件中设置完uni.setTabBarItem（效果确实文字已改成“回顶部”），但是onTabItemTap生命周期里面打印的还是“首页”，先定位下这个问题？

回复 i***@163.com: 感谢您的反馈，我理解啥意思了，正在排查是啥原因导致的

回复 DCloud_UNI_yuhe: 好的，有方案了回一下

回复 DCloud_UNI_yuhe: 你好，有啥结果了吗

回复 DCloud_UNI_yuhe: 出结果了吗

在uni-app中，uni.setTabBarItem 用于动态设置底部 tab 栏的某一项的内容，而 onTabItemTap 事件用于监听 tab 项的点击事件。如果你发现通过 uni.setTabBarItem 设置后的 text 属性在 onTabItemTap 回调中获取的不是设置的值，这可能是由于某些缓存或同步问题导致的。为了确保 onTabItemTap 中能正确获取到设置的 text，我们可以尝试一些方法，例如使用全局变量或本地存储来记录这些值。

下面是一个示例代码，展示了如何使用 uni.setTabBarItem 设置 tab 项，并通过一个全局变量来确保在 onTabItemTap 中能获取到正确的 text 值。

设置 Tab 项并触发事件

// 在某个页面或组件中
const tabBarTexts = {
    0: '首页',
    1: '动态',
    2: '消息',
    3: '我的'
};

// 假设我们要修改第二个 tab 项的 text
uni.setTabBarItem({
    index: 1,
    text: '最新动态'
}, () => {
    // 设置成功后，更新全局变量
    tabBarTexts[1] = '最新动态';
    console.log('TabBar item updated:', tabBarTexts);
});

// 监听 tab 项点击事件
uni.onTabItemTap((e) => {
    console.log('Tab item tapped:', e.index, 'Text:', tabBarTexts[e.index]);
});

全局变量管理

为了确保全局变量 tabBarTexts 在整个应用中可用，你可以将其定义在一个公共的 JS 文件中，例如 common/constants.js，然后在需要的地方引入。

// common/constants.js
export const tabBarTexts = {
    0: '首页',
    1: '动态',
    2: '消息',
    3: '我的'
};

// 在需要使用的地方引入
import { tabBarTexts } from '@/common/constants.js';

// 之后的代码和上面的示例相同

注意事项

  1. 确保同步：在调用 uni.setTabBarItem 后，立即更新全局变量，以确保两者之间的同步。
  2. 避免硬编码：使用全局变量或配置文件来管理 tab 项的文本，可以避免硬编码带来的维护问题。
  3. 测试：在多个设备和平台上测试你的应用，以确保 uni.setTabBarItem 和 onTabItemTap 的行为符合预期。

通过上述方法，你应该能够在 onTabItemTap 回调中正确获取到通过 uni.setTabBarItem 设置的 text 值。

回到顶部