博客

html部分

<view class="home-background">
<view class="nav-box" :style="{height:height + 'px'}">
				<view class="nav-bar" :style="{height: menuButtonHeight + 'px',top:menuButtonTop + 'px'}">
					<view class="nav-bar-content" :style="{width:'78rpx'}">
						<view class="nav-bar-content-text">title</view>
					</view>
				</view>
</view>
<view :style="{height:height + 'px'}">

</view>
</view>

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;
	}