uni-app 【报Bug】setTabBarStyle APP下无法动态设置midButton

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

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

6 回复

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(中间按钮)的样式。

可能的原因

  1. 平台限制:某些平台(如 iOS 或 Android)可能对 midButton 的样式设置有特定的限制或要求。
  2. API 支持问题setTabBarStyle 可能在某些平台或版本中对 midButton 的支持不完全。
  3. 配置问题:可能是你在使用 setTabBarStyle 时的参数配置不正确,导致无法生效。

解决方法

  1. 检查平台支持:首先,确认你使用的 uni-app 版本是否支持在 APP 环境下动态设置 midButton。可以查阅官方文档或更新到最新版本。

  2. 正确使用 API:确保你调用 setTabBarStyle 时的参数是正确的。例如:

    uni.setTabBarStyle({
      midButton: {
        iconPath: '/static/midButton.png',
        text: '中间按钮',
        selectedIconPath: '/static/midButtonSelected.png',
        selectedText: '已选中',
        // 其他配置项
      }
    });
  3. 使用条件编译:如果某些平台不支持,可以使用条件编译来针对不同平台进行不同处理。例如:

    // #ifdef APP-PLUS
    // APP 平台下的特殊处理
    uni.setTabBarStyle({
      midButton: {
        iconPath: '/static/midButton.png',
        text: '中间按钮',
        selectedIconPath: '/static/midButtonSelected.png',
        selectedText: '已选中',
      }
    });
    // #endif
  4. 自定义组件:如果 setTabBarStyle 无法满足需求,可以考虑自定义一个底部导航栏组件,完全由自己控制样式和交互。

示例代码

// 在页面或组件的某个方法中调用
uni.setTabBarStyle({
  midButton: {
    iconPath: '/static/midButton.png',
    text: '中间按钮',
    selectedIconPath: '/static/midButtonSelected.png',
    selectedText: '已选中',
  }
});
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!