<template>
<view class="toast-layout-page">
<uni-nav-bar title="Toast 点击位移测试" navigationBarTextStyle="white" class="test-navbar" />
<scroll-view class="test-scroll" direction="vertical">
<view class="test-content">
<text class="test-heading">观察导航栏与底部按钮</text>
<text class="test-description">先点击按钮显示提示,再用手点击黑色提示框。观察导航栏是否上移、底部按钮是否下移,以及提示消失后是否恢复。</text>
<text class="test-description">本页直接调用 uni.showToast,自定义导航使用官方 uni-nav-bar,底栏使用动态底部安全区留白。</text>
<button class="test-button" @click="showPageToast">普通 Toast(不传 position)</button>
<!-- #ifdef APP -->
<button class="test-button" @click="showApplicationToast">Toast(position: center)</button>
<!-- #endif -->
<text class="test-marker">内容位置参照线</text>
</view>
</scroll-view>
<view class="test-footer">
<button class="test-save" @click="showPageToast">底部按钮:显示普通 Toast</button>
</view>
</view>
</template>
<script setup lang="ts">
// #region 原生 Toast 对照
function showPageToast(): void {
uni.showToast({ title: '请手动点击此提示框', icon: 'none', duration: 3000, mask: false })
}
// #ifdef APP
function showApplicationToast(): void {
uni.showToast({ title: '请手动点击此提示框', icon: 'none', duration: 3000, mask: false, position: 'center' })
}
// #endif
// #endregion
</script>
<style>
.toast-layout-page { flex: 1; background-color: #f5f5f5; }
.test-navbar { flex-shrink: 0; background-color: #55b983; }
.test-scroll { flex: 1; }
.test-content { padding: 24px; padding-bottom: 180px; }
.test-heading { font-size: 20px; line-height: 30px; color: #222222; font-weight: bold; }
.test-description { margin-top: 16px; font-size: 16px; line-height: 26px; color: #555555; }
.test-button { margin-top: 24px; font-size: 16px; color: #333333; }
.test-marker { margin-top: 32px; padding-top: 16px; border-top: 2px solid #ee5555; font-size: 16px; color: #aa3333; }
.test-footer { position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); background-color: #ffffff; }
.test-save { height: 56px; line-height: 56px; margin: 0; border-radius: 0; background-color: #55b983; color: #ffffff; font-size: 17px; }
</style> - 发布:2026-10-17 15:10
- 更新:2026-10-17 15:14
- 阅读:24
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: Mac
HBuilderX类型: 正式
HBuilderX版本号: 5.31
手机系统: iOS
手机系统版本号: iOS 26
手机厂商: 苹果
手机机型: iPhone 12 pro
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
- 页面设置 navigationStyle: "custom"、disableScroll: true。
- 顶部使用官方 uni-nav-bar,通过 var(--status-bar-height) 避让状态栏。
- 底部放置固定按钮,通过 env(safe-area-inset-bottom) 避让底部安全区。
- 调用 uni.showToast 显示纯文字提示。
- 提示显示期间,手动点击黑色 Toast 提示框。
uni.showToast({
title: '请手动点击此提示框',
icon: 'none',
duration: 3000,
mask: false
})
- 页面设置 navigationStyle: "custom"、disableScroll: true。
- 顶部使用官方 uni-nav-bar,通过 var(--status-bar-height) 避让状态栏。
- 底部放置固定按钮,通过 env(safe-area-inset-bottom) 避让底部安全区。
- 调用 uni.showToast 显示纯文字提示。
- 提示显示期间,手动点击黑色 Toast 提示框。
uni.showToast({
title: '请手动点击此提示框',
icon: 'none',
duration: 3000,
mask: false
})
预期结果:
点击 Toast 提示框不应改变底层页面的状态栏占位、底部安全区或布局位置。
点击 Toast 提示框不应改变底层页面的状态栏占位、底部安全区或布局位置。
实际结果:
- Toast 刚显示时,页面布局正常。
- 手动点击 Toast 提示框后,出现安全区占位失效的现象:
- 自定义导航栏及内容向上移动,导航标题与系统状态栏重叠。
- 底部固定按钮向下移动,底部安全区留白消失。
- Toast 消失后,页面恢复正常。
- 不点击 Toast 提示框时,没有观察到位移。
- Toast 刚显示时,页面布局正常。
- 手动点击 Toast 提示框后,出现安全区占位失效的现象:
- 自定义导航栏及内容向上移动,导航标题与系统状态栏重叠。
- 底部固定按钮向下移动,底部安全区留白消失。
- Toast 消失后,页面恢复正常。
- 不点击 Toast 提示框时,没有观察到位移。
bug描述:
- HBuilderV-Alpha 版本: 5.31.2026100911-alpha VS Code: 1.129.0-alpha
- 平台:iOS 真机、自定义运行基座
- 模式:uni-app x 蒸汽模式
- 业务项目及本地 hello uni-app x 示例项目均可复现
iOS 蒸汽模式下,点击 Toast 提示框导致页面安全区失效,提示消失后恢复