03 uniapp自定义导航栏的开发

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在我眼里自定义导航分2类: 原生基础上 || 非原生基础上

总结:项目当中能原生就原生,提高性能

区别

uni-app 自带原生导航栏，在pages.json里配置。原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。但原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。在App下，pages.json里每个页面的app-plus下可以设置titleNView等更多参数，可以得到比微信小程序更丰富的扩展性。另外，开发者也可以在必要时取消原生导航栏，使用view自行绘制导航栏。

原生基础上

通过app-plus属性对自定义导航扩展

https://uniapp.dcloud.io/collocation/pages?id=app-plus

文档描述: 1.原生导航能解决业务需求的情况下，尽量使用原生导航,甚至有时需要牺牲一些不是很重要的需求。 2.在App和H5下，uni-app提供了灵活的处理方案：`titleNView、subNVue`、或整页使用nvue。 3.但在小程序下，因为其自身的限制，没有太好的方案。有必要的话，也可以用条件编译分端处理。

所以主要是使用app-plus的titleNView(导航栏)、subNVue(子窗口)属性

titleNView(导航栏) 以下都是在titleNView属性下操作

https://uniapp.dcloud.io/collocation/pages?id=app-titlenview

常用的是按钮属性:https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons

titleNView.buttons.type

除了type文档还有其它属性

"buttons": [{"type": "menu"},{"type": "favorite"}] 其它类型 "forward"：前进按钮 "back"：后退按钮 "share"：分享按钮 "favorite"：收藏按钮 "home"：主页按钮 "menu"：菜单按钮 "close"：关闭按钮 "none"：无样式，不显示图标

自定义返回按钮

titleNView.backButton

用法跟button一样,但需需要在autoBackButton设置为true时生效 https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-backbuttonstyles

titleNView.<其它属性>

https://uniapp.dcloud.io/collocation/pages?id=app-titlenview

出了按钮跟返回按钮还有其它属性比如 searchInput 原生导航栏上的搜索框配置 homeButton 标题栏控件是否显示Home按钮 backgroundImage 背景图片路径等等

这些按钮的生命周期

//其中事件参数e.index值为点击按钮在buttons数组的索引值，从0开始 onNavigationBarButtonTap(e) 该生命周期监听按钮的点击事件 //设有搜索框时搜索框的生命周期 onNavigationBarSearchInputChanged()//搜索框内容变化 onNavigationBarSearchInputConfirmed()//搜索事件也是手机的回车事件

更改这些按钮的方法

webView对象文档及其它方法https://www.html5plus.org/doc/zh_cn/webview.html#

搜索WebviewObject关键字第47个处

// #ifdef APP-PLUS var webView = this.$mp.page.$getAppWebview(); //必须先获取webview对象 webview.showTitleNViewButtonRedDot()//调用方法显示红点 webview.showTitleNViewButtonRedDot()//调用方法隐藏红点 webview.setTitleNViewButtonBadge()//修改红点角标 webview.setTitleNViewButtonStyle()//修改按钮 // #endif

这些是原生基础上app-plus的titleNView(导航栏),还有个subNVue(子窗口)属性

subNVue(子窗口)属性以下都是在subNVue(子窗口)属性下操作

配置

subNVue.style

https://uniapp.dcloud.io/collocation/pages?id=app-subnvuesstyle

subNVue是 vue 页面的子窗体，它不是全屏页面，就是用于解决 vue 页面中的层级覆盖和原生界面自定义用的。它也不是组件，就是一个原生子窗体

nvue快速上手 https://uniapp.dcloud.io/nvue-outline?id=_1%e6%96%b0%e5%bb%banvue%e9%a1%b5%e9%9d%a2

方法

const subNVue = uni.getSubNVueById('原生子窗体的 ID');获取子窗口对象用于开发弹窗与导航 subNVue对象的方法 https://uniapp.dcloud.io/api/window/subNVues?id=app-getsubnvuebyid nvue 跟 vue 的通讯 https://ask.dcloud.net.cn/article/36010

非原生基础上

全局取消原生导航栏"navigationStyle":"custom"

1.取消原生导航栏

"navigationStyle":"custom" 带来的问题:有些新组件已经解决了这个问题. 状态栏(显示电量的那一栏,不是导航栏),导航栏直接陷进去了.

2.处理状态栏问题

App因为默认为沉浸式，去除导航栏后，页面顶部会直通到状态栏的区域

uni-app 提供内置 CSS 变量解决

https://uniapp.dcloud.io/frame?id=css变量

写成代码后直接解决了我这个问题

 <view class="status_bar"> <view class="top_view"></view> </view>  /* * !!!然后在这下面放自己的导航组件就行 * https://ext.dcloud.net.cn/plugin?id=52(这个我感觉就可以了) */ //css部分 .status_bar { height: var(--status-bar-height); width: 100%; background-color: #F8F8F8; } .top_view { height: var(--status-bar-height); width: 100%; position: fixed; background-color: #F8F8F8; top: 0; z-index: 999; }

3.H5、小程序、App端状态栏都不一样，需要重新计算处理,下面是别人处理好的代码

直接使用，在App.vue里面设置即可

onLaunch: function() { uni.getSystemInfo({ success:function(e){ Vue.prototype.statusBar = e.statusBarHeight // #ifndef MP if(e.platform == 'android') { Vue.prototype.customBar = e.statusBarHeight + 50 }else { Vue.prototype.customBar = e.statusBarHeight + 45 } // #endif // #ifdef MP-WEIXIN let custom = wx.getMenuButtonBoundingClientRect() Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight // #endif // #ifdef MP-ALIPAY Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight // #endif } }) },