关于uniapp自定义标题栏，高度自适应对齐方案解决

码小帅分帅

已于 2023-03-08 11:16:35 修改

阅读量1.5k

点赞数

分类专栏：微信小程序文章标签： uni-app

于 2023-03-06 17:40:24 首次发布

本文链接：https://blog.csdn.net/shuai1999m/article/details/129366964

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

	给我们需要自定义的页面进行配置"navigationStyle":"custom"

在这里插入图片描述

关于ios和Android状态栏高度不一致声明：ios标题栏高度为44px，Android为46px；

html代码：

<view class="content-fixed">
	<view v-if="platform === 'ios'">
		<view class="status_bar" :style="'height:' + statusBarHeight + 'px;'">
		</view>
		<view class="navbar-title" style="height: 44px;">
			<image style="width: 186upx;height: 68upx;margin-left: 34upx;" src="../../static/home-title.png"></image>
			<view class="title-icon" @click="toCustorm">
				<image class="customer-service" src="../../static/customer-service.png"></image>
			</view>
		</view>
	</view>
	<view v-if="platform === 'android'">
		<view class="status_bar" :style="'height:' + statusBarHeight + 'px;'">
			  <!-- 这里是状态栏 -->
		</view>
		<view class="navbar-title">
			<image style="width: 186upx;height: 68upx;margin-left: 34upx;" src="../../static/home-title.png"></image>
			<view class="title-icon" @click="toCustorm">
				<image class="customer-service" src="../../static/customer-service.png"></image>
			</view>
		</view>
	</view>
</view>

状态栏可通过uniapp的uni.getSystemInfo动态获取；代码如下

const that = this
//获取手机型号
uni.getSystemInfo({
    success: function (res) {
		that.statusBarHeight = res.statusBarHeight//状态栏高度
		that.platform = res.platform//机型
    }
});

css：

.content-fixed {
width: 100%;
	position: fixed;
	top: 0;
	background: linear-gradient(180deg, #fa2828 0%, #fa3d38 100%);
	z-index: 9999;
}
.status_bar {
     height: var(--status-bar-height);
     width: 100%;
 }
 .navbar-title {
	 width: 100%;
	 height: 46px;
	 color: #FFFFFF;
	 font-size: 64upx;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 // position: fixed;
	 // top: 44upx;
	 .title {
	 	margin-left: 34upx;
	 }
	 .title-icon {
		width: 64upx;
		height: 64upx;
		border-radius: 32upx;
		background-color: rgba(36, 36, 36, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
		/* #ifdef MP-WEIXIN */
		margin-right: 210upx;
		/* #endif */
		/* #ifdef APP-PLUS */
		margin-right: 30rpx;
		/* #endif */
		vertical-align: middle;				
		.customer-service {
			width: 40upx;
			height: 40upx;
			uni-image {
				width: 40upx;
				height: 40upx;
			}
		}
		
	 }
 }