uni-app小程序自定义导航栏

最近在开发一个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"返回调用方法，如不需要设置属性也可不写改属性，或直接使用状态栏名称标签代替。

更多详情可参考官网

效果

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