uni-app 【报Bug】setTabBarStyle APP下无法动态设置midButton
uni-app 【报Bug】setTabBarStyle APP下无法动态设置midButton
示例代码:
<template>
<view class="content">
页面 - 1
<button @tap="showButton">显示中间按钮</button>
<button @tap="hideButton1">隐藏中间按钮方法1</button>
<button @tap="hideButton2">隐藏中间按钮方法2</button>
<button @tap="showtabBar">显示tabBar</button>
<button @tap="hidetabBar">隐藏tabBar</button>
<button @tap="switchIcon">更换图标</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
showButton(){
uni.setTabBarStyle({
midButton : {
"iconPath": "static/img/tabbar/add.png"
}
})
},
hideButton1(){
uni.setTabBarStyle({
midButton: undefined
})
},
hideButton2(){
uni.setTabBarStyle({
midButton: {
"iconPath": "",
"width": "0px"
}
})
},
showtabBar(){
uni.showTabBar()
},
hidetabBar(){
uni.hideTabBar()
},
switchIcon(){
uni.setTabBarStyle({
midButton : {
"iconPath": "static/img/tabbar/home.png"
}
})
}
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
margin-top: 200upx;
}
</style>
操作步骤:
- 点击“隐藏中间按钮方法1”
预期结果:
- tabBar中midButton不显示
实际结果:
- 安卓APP中tabBar中midButton没有变化,H5下midButton消失
bug描述:
安卓app下,无法通过下面代码隐藏midButton
hideButton1(){
uni.setTabBarStyle({
midButton: undefined
})
},
hideButton2(){
uni.setTabBarStyle({
midButton: {
"iconPath": "",
"width": "0px"
}
})
},
信息类别 | 详细信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | windows11 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 3.8.7 |
手机系统 | Android |
手机系统版本号 | Android 13 |
手机厂商 | 小米 |
手机机型 | 红米k50 |
页面类型 | vue |
vue版本 | vue2 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
4.0.2024012711-alpha 版本
可以隐藏
hideButton2(){
uni.setTabBarStyle({
midButton: {
“iconPath”: “”,
“width”: “0px”
}
})
},
可以更换
switchIcon(){
uni.setTabBarStyle({
midButton : {
“iconPath”: “static/img/tabbar/home.png”
}
})
}
升级HBuilderX吗?
回复 萤火星: 这个api 之前也是可以使用的,你可以尝试更新之后试试
最新的也无法使用
楼主有解决么?怎么解决的?
在 uni-app
中,setTabBarStyle
是用于动态设置底部导航栏样式的方法。然而,根据你的描述,似乎在 APP 环境下无法动态设置 midButton
(中间按钮)的样式。
可能的原因
- 平台限制:某些平台(如 iOS 或 Android)可能对
midButton
的样式设置有特定的限制或要求。 - API 支持问题:
setTabBarStyle
可能在某些平台或版本中对midButton
的支持不完全。 - 配置问题:可能是你在使用
setTabBarStyle
时的参数配置不正确,导致无法生效。
解决方法
-
检查平台支持:首先,确认你使用的
uni-app
版本是否支持在 APP 环境下动态设置midButton
。可以查阅官方文档或更新到最新版本。 -
正确使用 API:确保你调用
setTabBarStyle
时的参数是正确的。例如:uni.setTabBarStyle({ midButton: { iconPath: '/static/midButton.png', text: '中间按钮', selectedIconPath: '/static/midButtonSelected.png', selectedText: '已选中', // 其他配置项 } });
-
使用条件编译:如果某些平台不支持,可以使用条件编译来针对不同平台进行不同处理。例如:
// #ifdef APP-PLUS // APP 平台下的特殊处理 uni.setTabBarStyle({ midButton: { iconPath: '/static/midButton.png', text: '中间按钮', selectedIconPath: '/static/midButtonSelected.png', selectedText: '已选中', } }); // #endif
-
自定义组件:如果
setTabBarStyle
无法满足需求,可以考虑自定义一个底部导航栏组件,完全由自己控制样式和交互。
示例代码
// 在页面或组件的某个方法中调用
uni.setTabBarStyle({
midButton: {
iconPath: '/static/midButton.png',
text: '中间按钮',
selectedIconPath: '/static/midButtonSelected.png',
selectedText: '已选中',
}
});