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

你是森林的小鹿

已于 2024-01-12 10:46:15 修改

阅读量3.5k

点赞数 5

文章标签： uni-app 前端 html

于 2022-12-27 16:40:32 首次发布

本文链接：https://blog.csdn.net/qq_45610622/article/details/128458133

版权

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('图片url');
		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;
	}