uniapp 顶部适配

在uniapp中，顶部导航的适配可以通过获取手机系统信息和状态栏信息来实现。首先，通过使用uni.getSystemInfo()方法获取手机设备的型号信息和状态栏的高度。然后，可以根据不同手机型号和状态栏高度来设置顶部导航的高度。例如，可以使用uni.getMenuButtonBoundingClientRect()方法获取胶囊（即系统状态栏内的菜单按钮）的位置信息。通过计算胶囊底部高度减去状态栏高度和胶囊顶部高度减去状态栏高度来确定导航栏的高度。将计算得到的导航栏高度赋值给导航栏的样式属性，以实现顶部导航的适配。这样，在不同手机型号和状态栏高度下，可以动态调整顶部导航的高度，以适应不同屏幕的显示需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [uniapp 任务栏顶部导航适配](https://blog.csdn.net/weixin_43825389/article/details/109242969)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [1.uniapp 自定义导航栏以及适配小程序](https://blog.csdn.net/weixin_51614564/article/details/127214592)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]