uniapp-全端开发-自我爬坑记录-顶部自定义导航栏刘海屏适配

顶部自定义导航栏使用css内置变量–status-bar-height在小程序表现为都是25px，无发适配iphoneX的刘海屏。可以通过获取系统信息的statusbarHeight来动态实现。

mounted() {
	this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
},

//navigation-bar是posision:fixed;top:0;
<navigation-bar >
	//status_bar是状态栏，通过动态获取系统信息的statusbarHeight来撑起高度，H5为height=0
	<view class="status_bar" :style="height: iStatusBarHeight + 'px'}">view>
	//nav-bar是搜索栏
	<view class="nav-bar">
		<view class="search-box" @tap="showSearch">
			<tui-icon name="search-2" :size="18" color="#bfbfbf">tui-icon>
			<view class="tui-search-text">请输入搜索关键字view>
		view>
	view>
navigation-bar>

该文章是自我记录