解决uniapp移除原生导航栏后页面与手机状态栏重叠问题

解决uniapp移除原生导航栏后页面与手机状态栏重叠问题


vue文件

<template>
	<view>
		<!-- 解决移除原生导航栏后页面与手机状态栏重叠问题 -->
		<!-- #ifdef APP-PLUS -->  
		<view class="status_bar">  
			<view class="top_view"></view>  
		</view>  
		<!-- #endif --> 
	</view>
<template>

<style>
    /* 解决移除原生导航栏后页面与手机状态栏重叠问题 */
	.status_bar {  
		height: var(--status-bar-height);  
		width: 100%;  
		background-color: #ffffff;  
	}  
	.top_view {  
		height: var(--status-bar-height);  
		width: 100%;  
		position: fixed;  
		background-color: #ffffff;  
		top: 0;  
		z-index: 999;  
	}  
<style>


page.json

{
    "path": "pages/category/category",
    "style": {
	"navigationBarTitleText": "首页",
	"navigationBarTextStyle": "black", //设置状态栏颜色
	"app-plus": {
		"titleNView": false //设置禁用原生导航栏
	}
    }
}





同类文章