<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>
萤火星
- 发布：2024-01-26 15:41
- 更新：2024-01-29 17:18
- 阅读：228
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows11
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
手机系统： Android
手机系统版本号： Android 13
手机厂商： 小米
手机机型： 红米k50
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
点击“隐藏中间按钮方法1”
点击“隐藏中间按钮方法1”
预期结果：
tabBar中midButton不显示
tabBar中midButton不显示
实际结果：
安卓APP中tabBar中midButton没有变化，H5下midButton消失
安卓APP中tabBar中midButton没有变化，H5下midButton消失
bug描述：
安卓app下，无法通过下面代码隐藏midButton
hideButton1(){
uni.setTabBarStyle({
midButton: undefined
})
},
hideButton2(){
uni.setTabBarStyle({
midButton: {
"iconPath": "",
"width": "0px"
}
})
},
喜欢技术的前端 - QQ---445849201
4.0.2024012711-alpha 版本
可以隐藏
hideButton2(){
uni.setTabBarStyle({
midButton: {
"iconPath": "",
"width": "0px"
}
})
},
可以更换
switchIcon(){
uni.setTabBarStyle({
midButton : {
"iconPath": "static/img/tabbar/home.png"
}
})
} 
萤火星 (作者)
升级HBuilderX吗？
2024-02-05 10:13
喜欢技术的前端
回复 萤火星: 这个api 之前也是可以使用的，你可以尝试更新之后试试
2024-02-05 14:11