当前位置：首页 > news >正文

uniapp修改原生导航栏样式、加图标、加文字、加点击事件

news 2025/10/11 16:32:03

1. uniapp修改原生导航栏样式、加图标、加文字、加点击事件

uniapp或者uview的导航栏无法满足需求时，可用下面方法进行修改原生导航栏样式、加图标、加文字、加点击事件。

//设置页面全屏
onShow() {this.initAluminumLiquidCodeList();this.handleInit();// #ifdef APP-PLUSplus.navigator.setFullscreen(true);//隐藏手机顶部状态栏plus.navigator.hideSystemNavigation();//隐藏手机底部导航按键// #endif
},
//监听页面卸载事件 如果不加这句，会导致跳转到别的页面后也是全屏
onUnload() {// #ifdef APP-PLUSplus.navigator.setFullscreen(false);//显示手机顶部状态栏plus.navigator.showSystemNavigation();//显示手机底部导航按键// #endif
},

1.1. 实践思路

（1）关闭按钮是使用原生button添加的close属性。（见page.json页面）
（2）监听关闭按钮的方法。（onNavigationBarButtonTap）
（3）写实现关闭webview所有页面的逻辑。

1.2. 标题栏添加文字代码

在这里插入图片描述

 {"path": "pages/index/index","style": {"navigationBarTitleText": "英语","navigationStyle": "custom","app-plus": {// "bounce": "none","titleNView": {"buttons": [{"text": "\uF3B0","fontSrc": "/static/MyFlutterApp.ttf","fontSize": "25px","float": "left","width": "65px"}, {"text": "\uEA07","fontSrc": "/static/MyFlutterApp.ttf","fontSize": "25px","float": "right","width": "65px"}]}}}}