微信小程序导航栏自定义

实现效果：

微信官方文档中页面配置项:

1.修改页面配置项

"pages": [ 
	{
        "path" : "pages/home/home",
        "style" : {
			"navigationStyle":"custom"
		}
    }
]

2.手机状态栏高度自适应

在App.vue中 用wx.getSystemInfo(Object object)获取系统信息

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			uni.getSystemInfo({
				success: (res) => {
					this.globalData.statusBarHeight = res.statusBarHeight
				 }
			})
		},
		onHide: function() {
			console.log('App Hide')
		},
		globalData: {
			statusBarHeight:0
		},
	}
</script>

在所需文件内部js中

<script>
	const app = getApp();
	export default{
		data() {
			return {
				statusBarHeight: 0
			}
		},
		onLoad:function(){
			this.statusBarHeight = getApp().globalData.statusBarHeight
		}
	}
</script>

在所需文件HTML中

<template>
	<view class="container">
		<view class="banContent">
			<view :style="{'height':statusBarHeight+'px'}"></view>
			<view class="title">
				<text>花西子</text>
			</view>
		</view>
	</view>
</template>

css样式如下

.banContent {
	width: 100%;
	height: 506rpx;
	background-image: url(自己的图片地址);
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}
.title {
	color: #FFFFFF;
	font-size: 36rpx;
	font-weight: 600;
	padding: 20rpx;
}