使用uni-app plus.nativeUI.setUIStyle(style)切换主题后 onNavigationBarButtonTap 导航按钮监听失效

使用uni-app plus.nativeUI.setUIStyle(style)切换主题后 onNavigationBarButtonTap 导航按钮监听失效

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：11

HBuilderX类型：正式

HBuilderX版本号：4.45

手机系统：Android

手机系统版本号：Android 14

手机厂商：vivo

手机机型：iqoo neo8

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

pages.js

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "uni-app",
        "titleNView": {
            "buttons": [{
                "text": "菜单",
                "float": "right",
                "color": "#14699b",
                "name": "bars"
            }]
        }
    }
}

index.vue

onNavigationBarButtonTap(ele) {
    console.log('================', ele);
    const { name } = ele;
    switch(name){
        case 'bars':
            uni.navigateTo({
                url: '/pages/index/test2'
            })
            break;
    }
},

切换主题

setUIStyle(style) {
    // #ifdef APP
    plus.nativeUI.setUIStyle(style)
    // #endif
},

更多关于使用uni-app plus.nativeUI.setUIStyle(style)切换主题后 onNavigationBarButtonTap 导航按钮监听失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于使用uni-app plus.nativeUI.setUIStyle(style)切换主题后 onNavigationBarButtonTap 导航按钮监听失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app在Android平台上的兼容性问题。当使用plus.nativeUI.setUIStyle()切换主题后，会导致导航栏按钮的点击事件监听失效。

解决方案：

  1. 最简单的方法是避免在页面中使用plus.nativeUI.setUIStyle()来切换主题，可以改用CSS变量或uni.setNavigationBarColor()来改变导航栏样式。

  2. 如果必须使用setUIStyle，可以在切换主题后重新设置导航栏按钮：

setUIStyle(style) {
    // #ifdef APP
    plus.nativeUI.setUIStyle(style);
    // 重新设置导航栏按钮
    uni.setNavigationBarButton({
        index: 0,
        text: "菜单",
        color: "#14699b"
    });
    // #endif
}
回到顶部