最近在开发一个uni-app小程序，用到了自定义导航栏，在这里记录一下实现过程：

page.json

在对应页面路由的style中设置入"navigationStyle": "custom"取消原生导航栏，自定义导航栏

{"path": "pages/index/index","style": {"navigationBarTitleText": "保单详情","navigationBarTextStyle": "light","navigationStyle": "custom"}
},

index.js（nvue）

<template><view class="content"><view :style="{ height: iStatusBarHeight + 'px'}"></view><uni-nav-bar class="title" left-icon="left" title="保单详情" backgroundColor="transparent" :border="false" @clickLeft="back" /></view>
</template><script>export default {data() {return {iStatusBarHeight: 0,};},onLoad() {this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;},methods: {back() {uni.navigateBack({delta: 1})},}};
</script>
<style lang="scss">.content {background: radial-gradient(circle at 0% 0%, rgba(255, 205, 155, 0.6), rgba(250, 251, 252, 0.5) 25%),radial-gradient(circle at 40% 5%, rgba(93, 179, 253, 0.6), rgba(250, 251, 252, 0.5) 30%),radial-gradient(circle at 90% 5%, rgba(118, 213, 255, 0.8), rgba(250, 251, 252, 0.5) 30%) beige;}.title {text-align: center;height: 40px;line-height: 40px;}
</style>

非H5端，手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因，即全屏可写内容。uni-app提供了状态栏高度的css变量–status-bar-height，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。

目前 nvue 在 App 端，还不支持 --status-bar-height变量，替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度。

uni-nav-bar 自定义导航栏left-icon属性设置返回键，@clickLeft="back"返回调用方法，如不需要设置属性也可不写改属性，或直接使用<view class='title'>状态栏名称</view>标签代替。

更多详情可参考官网

效果

背景渐变色效果是由上面style样式自定义设置的，可按需要进行重新设置