新手uni-app纯手写微信小程序自定义标题栏适配全面/异形屏幕iphone x

爱上你这件事太妙了，三缄其口，却又四海生风，有亏盈，有枯荣

唠叨一会

作为一个新手我又学习了吗？不，绝对不是！枫瑞有关于uni的文章后绝对是因为给骂了。一个js都不会新手在自己在画ui的时候总总会有几个界面是能画出来而写不出来的！

麻瓜思路

新手uni-app纯手写微信小程序自定义标题栏适配全面/异形屏幕iphone x ，按下图 我们知道顶部红色的是状态栏它会因为我们手机不同而又不同的高度特别是在iphone x这块，蓝色是标题栏基本是固定88upx所以我们直接写死了。我们需要做什么呢？首先需要获取系统信息来动态赋值给状态栏高度和iphone x的底部安全区，自定义标题栏可能是因为前面有东西不需要原生标题，当滑动到某高度的时候我们就就要显示自定义的标题栏

操作步骤

1.新建一个项目uni-app

2.新建2个界面一个主页，一个二级界面

首页界点击跳转二级界面

<view class="content">
	<image class="logo" src="/static/logo.png"></image>
	<view class="text-area">
		<button type="default" @tap="tapurl"> 打开自定义导航界面 </button>
	</view>
</view>

methods: {
	tapurl:function() {
		uni.navigateTo({
			  url: '../data/data'
		});
	}
}

3.pages.json 修改二级界面，取消原生导航

"path" : "pages/data/data",
    "style" : {
         "navigationStyle": "custom",
          "navigationBarTextStyle": "black"
}

4.二级界面获取系统信息，将状态栏高度存起来

onLoad() {
	this.stytemInfo();
},
methods: {
	// 获取系统信息
	stytemInfo:function(){
		var that = this;
		uni.getSystemInfo({
			success: function (res) {
				that.titleHeight = res;
				console.log(that.titleHeight)
			}
		});
	},
}

5.赋值定义状态栏高度

<!-- 状态栏高度 -->
<view class="state-h" :style="{ height: titleHeight.statusBarHeight + 'px'}"></view>

自定义标题栏

<!-- 自定义标题栏 -->
<view class="title-w">
	<view class="title-img" @tap="tarBlack()">
		<image class="fengrui-img" src="../../static/tarblack.png" mode=""></image>
	</view>
	<view class="title-h" >文章详情</view>
</view>

点击放回上一页

// 左上角返回按钮
tarBlack: function() {
	uni.navigateBack({
		elta: 1
	});
},

填坑记

--status-bar-height

uni-app 提供内置 CSS 变量var(--status-bar-height)，此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度

源码下载

关注枫瑞博客微信公众号回复“2078”下载源码