关于uniapp自定义标题栏，高度自适应对齐方案解决_uniapp 获取苹果标题栏高度 不准确

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

const that = this
//获取手机型号
uni.getSystemInfo({
    success: function (res) {
		that.statusBarHeight = res.statusBarHeight//状态栏高度
		that.platform = res.platform//机型
    }
});
1
2
3
4
5
6
7
8

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;
			}
		}
		
	 }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50