【转】练习uni-app框架微信小程序自定义标题栏适配全面/异形屏幕iphone x

fengrui99

原文来自：https://www.frbkw.com/2891/
该博主天天打错字，有错误的地方大家可以指出来哈

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


操作步骤
1.新建一个项目uni-app2.新建2个界面一个主页，一个二级界面首页界点击跳转二级界面

[Asm] 纯文本查看 复制代码

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

[Asm] 纯文本查看 复制代码

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

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

[Asm] 纯文本查看 复制代码

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

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

[Asm] 纯文本查看 复制代码

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

5.赋值定义状态栏高度

[Asm] 纯文本查看 复制代码

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

自定义标题栏

[Asm] 纯文本查看 复制代码

<!-- 自定义标题栏 -->
<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>

点击放回上一页

[Asm] 纯文本查看 复制代码

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

案例下载：
链接:https://pan.baidu.com/s/1LvfGha-Z1cyYQ_aZQ00y8g 提取码:jxqq