小程序自定义导航栏

uniapp+u-view自定义导航栏

1.在page.json设置navigationStyle 为custom
2.设置导航栏内容,样式

<u-navbar back-icon-color="#000000" title=" " :immersive="true" :background="background" :border-bottom="false" height="44">
		 <view class="slot-wrap">
			 标题
		 </view>
</u-navbar>

3.兼容刘海屏

//获取设备信息
data(){
	return{
		statusBarHeight:' ',//接受状态栏高度
	}
}
uni.getSystemInfo({
					success: (res) => {
						this.statusBarHeight= res.statusBarHeight+'px'   //状态栏高度
					}
				})

4.view动态设置高度来填充状态栏的高度

	<view :style="'height:'+statusBarHeight"></view>