前言

Hbuilder X 2.7.14.20200618

什么是自定义导航栏

默认导航栏或原生导航栏是啥样的，你懂的。

但，我想给导航栏加个背景图，比如这样：

我想给导航栏背景设置成渐变，比如这样：

这时候就需要自定义导航栏。

自定义导航栏

自定义导航栏的中心思想是：

取消默认导航栏或原生导航栏。
自定义导航栏，并放置到正确位置。

取消默认导航栏或原生导航栏

取消默认导航栏或原生导航栏有两个方式：

全局取消原生导航栏
单页面取消原生导航栏

全局取消原生导航栏

在 pages.json 的 globalStyle 里有个 navigationStyle 配置项，默认是default。navigationStyle=default 时，所有页面均为原生导航栏；navigationStyle=custom时，所有页面都没有原生导航栏。

...
"globalStyle": {..."navigationStyle": "custom",...
},
...

单页面取消原生导航栏

在 pages.json 的 pages 配置项下每个页面均有个 navigationStyle 配置项，默认是default。navigationStyle=default 时，该页面均为原生导航栏；navigationStyle=custom时，该页面都没有原生导航栏。

...
"pages": [ {"path" : "pages/index/index","style" : {"navigationBarTitleText" : "首页","navigationStyle":"custom",...}},...
],
...

取消原生导航栏后是这样的

取消原生导航栏后，页面顶部直通状态栏区域。
由于窗体为沉浸式，因此页面占据了状态栏位置，导致页面顶部直通状态栏区域。

注意：在微信小程序里，右上角始的胶囊按钮不受取消原生导航栏设置的影响。

自定义导航栏

自定义导航栏可以理解为出现在原生导航栏区域的页面元素。

假设要在导航栏中添加LOGO，实现如下效果：

在 pages.json 的 pages 配置项下，修改 pages/index/index 页面的配置如下：

"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","navigationStyle":"custom"}}
],

pages/index/index 代码为

<template><view><!-- 自定义导航栏 --><view class="navBarBox"><!-- 状态栏占位 --><view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view><!-- 真正的导航栏内容 --><view class="navBar"><image class="logo" src="/static/logo.png" mode="scaleToFill"></image><view>我是导航栏标题</view></view></view><!-- 页面内容 --><view>我是页面内容</view></view>
</template><script>export default {data() {return {// 状态栏高度statusBarHeight: 0,// 导航栏高度navBarHeight: 82+11,};},props: {},//第一次加载时调用created() {//获取手机状态栏高度this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];},}
</script><style>
.navBarBox{}
.navBarBox .statusBar {}
.navBarBox .navBar {padding: 3rpx 50rpx;padding-bottom: 8rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;
}
.navBarBox .navBar .logo {width: 82rpx;height: 82rpx;margin-right: 10rpx;
}
</style>

说明：

页面加载后，计算导航栏高度。
得到状态栏高度后，将状态栏高度赋值给状态栏占位元素。这样就空出了状态栏。注意状态栏的单位为px，其它地方使用的单位为rpx。
导航栏中放置一个image元素，用于展示LOGO。再放一个view元素，用于展示标题。

运行到小程序模拟器，得到前面想要的效果。

自定义导航栏组件

在uni-app插件市场搜索导航栏插件，可以轻松实现自定义导航栏。
如果找不到合适的，可以按照前面的步骤自己编写。

【uni-app】自定义导航栏/标题栏相关推荐

android 自定义标签导航栏,自定义导航栏app下载-自定义导航栏（Custom Navigation Bar）安卓版v0.4.3-PC6安卓网...
自定义导航栏(Custom Navigation Bar)app是款非常好用的实用工具,自定义导航栏能让你自己设置个性的导航栏,再也不用为单调的导航栏而发愁,独特且唯一,感兴趣的朋友就来下载自定义导航 ...
uniapp中自定义导航栏
相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然u ...
微信小程序自定义导航栏完整适配方案
写这篇博客的背景临近节日,产品想给小程序首页头部设置图片背景,这个只能自定义导航栏来实现当然除了自定义背景图,还可以放置其他组件,按钮.搜索框等实践部分设备状态栏.胶囊.间距的高度(仅供参考)( ...
修改自定义导航栏按钮文字内容的方法
第一步在 pages.json 内部定义原生导航栏搜索框和按钮 {"path": "pages/tabbar/dingdan/dingdan","s ...
分别用ToolBar和自定义导航栏实现沉浸式状态栏
一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...
记一次小程序自定义导航栏及加载动画的解决方案
记一次小程序自定义导航栏及加载动画的解决方案主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ip6 ipx ...
【小程序】自定义导航栏
这个需求要不是UI和我讲有其他小程序实现了,我都还以为小程序还不能做到自定义导航.还好是在设计阶段给出的需求,不然... 先看看效果吧微信小程序自定义导航栏开始接介绍用法: 1:配置app.jso ...
uniapp自定义导航栏，高度，自定义组件
设置自定义导航栏 :globalStyle 内 navigationStyle": "custom" 配置页面:pages.json "globalStyle& ...
微信小程序的自定义导航栏
微信小程序的导航栏主要分为两个部分:状态栏和标题栏. 关于微信小程序的自定义导航栏也就是通过微信小程序官方提供的API接口来算出状态栏和标题栏的高度. 注意获取到的数值单位都是px. 首先要开启自定义 ...

【uni-app】自定义导航栏/标题栏

目录

前言

什么是自定义导航栏

自定义导航栏

取消默认导航栏或原生导航栏

全局取消原生导航栏

单页面取消原生导航栏

取消原生导航栏后是这样的

自定义导航栏

自定义导航栏组件

【uni-app】自定义导航栏/标题栏相关推荐

最新文章

热门文章