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

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

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

//设置页面全屏
onShow() {

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

// #ifdef APP-PLUS
plus.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"
}]
}
}
}
}

1.3. 标题栏添加图标

  （1）示例