uni-app沉浸式导航栏选择图片问题

uni-app沉浸式导航栏选择图片问题

沉浸式导航栏，在有些机型上会把完成 选择图片的按钮给遮挡住

图片

2 回复

参考下这篇帖子，https://ask.dcloud.net.cn/question/208102

更多关于uni-app沉浸式导航栏选择图片问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题的原因是沉浸式导航栏在不同机型上的高度和位置差异导致的。建议通过以下方式解决：

  1. 使用uni.getSystemInfoSync()获取状态栏高度，动态计算布局间距：
const systemInfo = uni.getSystemInfoSync()
const statusBarHeight = systemInfo.statusBarHeight
  1. 在页面样式中添加安全区域处理：
/* 使用CSS变量 */
page {
  --status-bar-height: 0px;
  padding-top: calc(var(--status-bar-height) + 10px);
}
  1. 对于需要固定位置的按钮，使用安全区域计算：
<view class="fixed-btn" :style="{top: statusBarHeight + 10 + 'px'}">
  <button>选择图片</button>
</view>
  1. 也可以考虑使用uni-app官方提供的安全区域组件：
<uni-nav-bar :fixed="true" :status-bar="true"></uni-nav-bar>
回到顶部