uni-app 【报Bug】uni.setTabBarItem方法修改完tabbar后 H5页面一刷新 tabbar就会消失

uni-app 【报Bug】uni.setTabBarItem方法修改完tabbar后 H5页面一刷新 tabbar就会消失

开发环境 版本号 项目创建方式
Windows Windows 11, version 23H2 HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Windows 11, version 23H2

HBuilderX类型：正式

HBuilderX版本号：4.08

浏览器平台：Chrome

浏览器版本：130.0.6723.119

项目创建方式：HBuilderX

示例代码：

tabBarNav(key, path) {
	console.log(key)
	let tabBarList = getApp().globalData.tabBar[key]
	if (!tabBarList) {
		console.error('No tabBar data found for key:', key)
		return
	}  

	tabBarList.forEach((v, i) => {  
		console.log('Setting tabBar item at index:', i, v)  
		uni.setTabBarItem({  
			index: i, // tabbar索引，第一个为0  
			pagePath: v.pagePath, // tabbar页面路径  
			text: v.text,  
			iconPath: v.iconPath, // tabbar默认图片路径  
			selectedIconPath: v.selectedIconPath, // tabbar选中后的图片路径  
			visible: true,  
		})  
	})  
	if (key == 'landlord') {  
		uni.setTabBarItem({  
			index: 3,  
			visible: false,  
		})  
	} else {  
		uni.setTabBarItem({  
			index: 3,  
			visible: true,  
		})  
	}  
	uni.switchTab({  
		url: path,  
	})  
},

更多关于uni-app 【报Bug】uni.setTabBarItem方法修改完tabbar后 H5页面一刷新 tabbar就会消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

这个不会被缓存的 你都刷新页面了 整个项目都会重新加载的 你可以在页面打开的时候重新修改一下

更多关于uni-app 【报Bug】uni.setTabBarItem方法修改完tabbar后 H5页面一刷新 tabbar就会消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个已经解决了 感谢

你好，请问这个问题是怎么修复的，方便说下吗(oﾟvﾟ)ノ

已修复，在 onShow() 中使用 uni.switchTab 重新跳转到目标页面即可

在uni-app中使用uni.setTabBarItem方法动态修改tabBar项时，确实可能会遇到在H5平台上刷新页面后tabBar消失的问题。这是因为H5平台与小程序、App等平台在处理原生tabBar时存在差异。H5页面刷新相当于重新加载页面，而动态修改的tabBar状态不会被持久化。

为了解决这个问题，我们可以采取一些策略来模拟或恢复tabBar的状态。以下是一个基于Vue和uni-app的解决方案，通过监听页面加载事件来重新设置tabBar项：

  1. 在App.vue中设置初始tabBar项：
<script>
export default {
  onLaunch() {
    // 初始化tabBar项（这里假设有三个tab项）
    uni.setTabBarStyle({
      color: '#7A7E83',
      selectedColor: '#3cc51f',
      backgroundColor: '#ffffff',
      borderStyle: 'black'
    });

    uni.setTabBarItem({
      index: 0,
      text: '首页',
      iconPath: '/static/tabbar/home.png',
      selectedIconPath: '/static/tabbar/home-active.png',
      pagePath: 'pages/index/index'
    });

    uni.setTabBarItem({
      index: 1,
      text: '发现',
      iconPath: '/static/tabbar/discover.png',
      selectedIconPath: '/static/tabbar/discover-active.png',
      pagePath: 'pages/discover/discover'
    });

    uni.setTabBarItem({
      index: 2,
      text: '我的',
      iconPath: '/static/tabbar/my.png',
      selectedIconPath: '/static/tabbar/my-active.png',
      pagePath: 'pages/my/my'
    });
  }
}
</script>
  1. 在需要动态修改tabBar项的页面中，监听页面显示事件：
<script>
export default {
  onShow() {
    // 假设这里需要修改第二个tab项
    uni.setTabBarItem({
      index: 1,
      text: '新发现',
      iconPath: '/static/tabbar/new-discover.png',
      selectedIconPath: '/static/tabbar/new-discover-active.png'
    });
  }
}
</script>
  1. 确保H5平台有模拟tabBar的逻辑：

由于H5不支持原生tabBar，通常我们会使用路由守卫或者自定义组件来模拟tabBar。上述代码主要适用于小程序和App平台。对于H5，你可能需要在App.vue或者根组件中通过Vue Router的导航守卫来动态渲染一个模拟的tabBar组件。

// 在router/index.js中设置导航守卫
router.beforeEach((to, from, next) => {
  // 根据to.path设置tabBar的当前选中项等逻辑
  next();
});

并结合一个自定义的tabBar组件来显示和处理点击事件。这样，即使页面刷新，tabBar的状态也可以通过Vuex或localStorage等方式持久化并恢复。

回到顶部