uni-app 更改头部导航条背景，改成背景图

原理很简单，将官网给头部导航条禁用，然后在相应的页面使用vue代码自己再写一个。

1、禁用官方头部导航

{
    "path": "pages/user/personal",   //页面
    "style": {
            "navigationStyle":"custom"  //禁用uni-app默认的头部导航
     }
}

2、自己在页面可以随心所欲的写自己要的样式啦

<template>
	<view>
		<view class="head_bg">
			<image src="../../static/images/bg1.png"></image>
		</view>
		<view class="personal_box_1">
			<view class="user_img">
				<image src="../../static/images/userhead.png"></image>
				<view>张zhang</view>
			</view>
			<ul>
				<li>
					<image src="../../static/images/notice1.png"></image>
					<navigator url="" open-type="navigate">消息通知</navigator>
				</li>
				<li>
					<image src="../../static/images/card.png"></image>
					<navigator url="" open-type="navigate">志愿者证</navigator>
				</li>
				<li>
					<image src="../../static/images/active.png"></image>
					<navigator url="" open-type="navigate">我的活动</navigator>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>	
	
</script>

<style scoped>
	.head_bg{ width: 100%; height: 304rpx;  }
	.head_bg image{ width: 100%; height: 304rpx; }
	.personal_box_1{ z-index: 1; position: absolute; width: 90%; height: 321rpx; margin: -90rpx 5% 0 5%; background: #fff; box-shadow: 0 4rpx 20rpx 0 rgba(99, 251, 172, 0.35); border-radius: 10rpx; }
    .personal_box_1 .user_img{ width: 100%; height: 200rpx; margin-top: -70rpx; text-align: center; font-size: 30rpx; color: #303133; display: inline-block; }
	.personal_box_1 .user_img image{ width: 116rpx; height: 116rpx; }
	.personal_box_1 ul{ width: 100%; height: auto; padding-top: 10rpx; display: inline-block; }
	.personal_box_1 ul li{ width: 33%; float: left; text-align: center; font-size: 28rpx; color: #303133;  }
	.personal_box_1 image{ width: 80rpx; height: 80rpx; border-radius: 50%; margin-bottom: 23rpx; }  
	
</style>