在我眼里自定义导航分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%E5%8F%98%E9%87%8F
写成代码后直接解决了我这个问题

<!-- #ifdef APP-PLUS -->
<view class="status_bar">  <view class="top_view"></view>
</view>
<!-- #endif -->/** !!!然后在这下面放自己的导航组件就行* 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 MPif(e.platform == 'android') {Vue.prototype.customBar = e.statusBarHeight + 50}else {Vue.prototype.customBar = e.statusBarHeight + 45}// #endif// #ifdef MP-WEIXINlet custom = wx.getMenuButtonBoundingClientRect()Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight// #endif// #ifdef MP-ALIPAYVue.prototype.customBar = e.statusBarHeight + e.titleBarHeight// #endif}})
},

禁用原生导航后还是可以通过接口改变样式的
https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.setStatusBarStyle

页面禁用原生导航栏后,仍可设置页面的 navigationBarTextStyle 属性
注意部分低端Android手机（4.4）自身不支持设置状态栏前景色。

uniapp自定义导航栏的开发相关推荐

uniapp自定义导航栏，手机顶部通知栏字体颜色修改
使用uniapp自定义导航栏时,自己的导航栏字体颜色为白色但是,系统上方的通知栏部分还是黑色,文档中表明设置这个就有用,即使你的配置是"navigationStyle": &qu ...
uni-app自定义导航栏右侧做增加按钮并跳转链接
uni-app自定义导航栏右侧做增加按钮并跳转链接 uni-app 在页面上的导航栏右侧做一个增加的图标并实现跳转 1. 先看效果图 2. 实现思路使用阿里图标库的字体图标, 下载放入本地文件 p ...
uniapp自定义导航栏遮住了手机状态栏问题
#uniapp在界面自定义导航栏之后,导航栏会自动占在屏幕的状态栏重叠上解决办法首先在pages.josn是页面里面加上"navigationStyle": "cus ...
uni-app自定义导航栏
有时我们需要对导航栏进行自定义,接下来就是对uni-app进行代码的编写对于一些不是很复杂的顶部导航,当然使用原生导航栏实现是最佳选择 uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只 ...
uniapp自定义导航栏，高度，自定义组件
设置自定义导航栏 :globalStyle 内 navigationStyle": "custom" 配置页面:pages.json "globalStyle& ...
uni-app 自定义导航栏
效果图隐藏小程序底部导航栏封装组件在 components 文件夹中新建一个 tabbar.vue 文件 <template><view class="tabbar& ...
uniapp自定义导航栏
APP中与微信小程序中使用的API不一样,下面就分别介绍一下使用方法微信小程序 getMenuButtonBoundingClientRect() 官方解说:在小程序平台,如果原生导航栏被隐藏,仍然 ...
uniapp自定义导航栏与手机状态栏重叠问题
HBuildX 创建的应用默认是沉浸式样式,去除自带的导航栏后,页面直通手机顶部状态栏,即页面与手机状态栏重叠问题处理:配置mainfest.json来关闭沉浸式,打开应用的manifest.jso ...
uniapp自定义导航栏高度
// 获取状态栏高度 var { statusBarHeight } = uni.getSystemInfoSync();// 获取胶囊位置尺寸 var menuButtonObject = uni. ...

uniapp自定义导航栏的开发

原生基础上

非原生基础上

uniapp自定义导航栏的开发相关推荐

最新文章

热门文章