uniapp沉浸式导航栏

uni-app是一种跨平台的应用开发框架，可以同时开发小程序、H5和App。沉浸式导航栏是指将页面顶部的组件填充到导航栏的区域，使得导航栏和页面顶部的组件融为一体。在uni-app中实现沉浸式导航栏可以通过修改页面的style属性来实现。具体步骤如下：

1. 在page.json文件中找到要实现沉浸式导航栏的页面，添加以下代码到该页面的style属性中：

   "style": {
     "navigationStyle": "custom"
   }

这样就将该页面的导航栏设置为沉浸式导航栏。

2. 通过uni.getSystemInfo方法获取屏幕的尺寸，可以根据需要进行页面布局的调整。

需要注意的是，以上方法适用于uni-app开发的小程序和H5页面。对于微信小程序页面，也可以通过设置导航栏的背景色为透明来实现沉浸式导航栏。具体的实现方式可以根据具体的需求和开发框架进行调整。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* [uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏](https://blog.csdn.net/qq_52925863/article/details/127451119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [uniapp设置导航栏、沉浸式导航栏以及获取屏幕尺寸](https://blog.csdn.net/EvaY_Yang/article/details/125554733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]