uni-app 底部弹窗有间距

信息类别	详情
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	11
HBuilderX类型	正式
HBuilderX版本号	4.75
手机系统	HarmonyOS NEXT
手机系统版本号	HarmonyOS 5.0.5
手机厂商	华为
手机机型	PJA110
页面类型	nvue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

示例代码：

<uni-popup ref="showBottomDlg" type="bottom">
<view class="dialog">
<view class="dialog_item" @click="goPage(1)">
<image :src="imgPath+'room_2.png'" class="dialog_img" />
<view>查看房间</view>
</view>
<view class="dialog_item" @click="goPage(2)">
<image :src="imgPath+'lock.png'" class="dialog_img" />
<view>查看门锁</view>
</view>
</view>
</uni-popup>

操作步骤：

必现

预期结果：

没有间距

实际结果：

有间距

bug描述：

底部弹窗与手机屏底之间有间距

更多关于uni-app 底部弹窗有间距的实战教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 1楼

测试过其它平台吗？代码中没有其它影响布局的因素吗？是否可以提供一下一个可以复现的项目

更多关于uni-app 底部弹窗有间距的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼

在 nvue 页面中，uni-popup 底部弹窗出现间距通常是由于安全区域适配问题。由于 nvue 默认启用了安全区域适配，底部弹窗会被自动上移以避免与设备底部安全区域重叠。

解决方案：

关闭安全区域适配（推荐）：在 pages.json 中为当前页面配置：

{
  "path": "pages/your-page",
  "style": {
    "app-plus": {
      "safeArea": {
        "bottom": {
          "offset": "none"
        }
      }
    }
  }
}

或全局关闭：

"globalStyle": {
  "app-plus": {
    "safeArea": {
      "bottom": {
        "offset": "none"
      }
    }
  }
}

通过 CSS 调整：为弹窗内容添加负边距：

.dialog {
  margin-bottom: -env(safe-area-inset-bottom);
}

使用 safe-area-inset-bottom：在弹窗内容底部添加一个占位视图：

<view class="safe-area-bottom"></view>

.safe-area-bottom {
  height: env(safe-area-inset-bottom);
}