uniapp自定义头部导航栏---带背景图片

html部分

				
					
						title
					
				

js 定义变量height: '',  menuButtonHeight: '',  menuButtonTop: '',

计算高度

getHeight() {
				const systemInfo = wx.getSystemInfoSync();
				const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
				this.height = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + (menuButtonInfo.height + 6) +
					systemInfo
					.statusBarHeight
				this.menuButtonHeight = menuButtonInfo.height
				this.menuButtonTop = menuButtonInfo.top
			},

css部分

.home-background {
		width: 100%;
		height: 560rpx;
		padding: 0 32rpx;
		background-image: url('http://photogz.photo.store.qq.com/psc?/V13XN2xs0gJuue/05RlWl8gsTOH*Z17MtCBzHdUv79YaErxmDYNAZ.IJh9v4S5CpfDoPNVmdBSGNzmXEqbaRFbd*V1ykxtMH7cbzA!!/m&bo=7gIwAu4CMAIWADA!&rf=viewer_311');
		background-repeat: no-repeat;
		background-size: 750rpx 560rpx;
	}

	.nav-bar {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 12rpx;
		position: absolute;
		left: 0;
		z-index: 99;
	}

	.nav-bar-content {
		height: 100%;
		width: 100% !important;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.nav-bar-content-text {
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.nav-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: transparent;
		z-index: 9999;
	}