uni.showToast 不显示的主因是 uni.showLoading 未关闭、页面跳转过快或 z-index 冲突;需先 hideLoading、延迟跳转、全局设置 .uni-toast z-index,并控制文本长度与端差异。

uni.showToast 被剪贴板操作“吞掉”了?先看是不是没关 loading
调用 uni.setClipboardData 后立刻 uni.showToast,结果提示不显示——这几乎 100% 是因为 uni.showLoading 还开着。微信小程序明确限制:showLoading 活跃期间,showToast 会被静默丢弃,连控制台都不报错。
常见错误写法:
uni.showLoading({ title: '复制中...' });
uni.setClipboardData({
data: 'xxx',
success: () => {
uni.showToast({ title: '已复制', icon: 'success' }); // ❌ 这里不会出现
}
});
正确做法必须显式关闭 loading:
- 在
success回调里先调uni.hideLoading(),再 showToast - 用
try...finally包裹,确保无论成功失败都 hideLoading - 别依赖
duration自动消失——它不解决“被拦截”问题
页面跳转太快,Toast 刚冒头就被干掉
复制完立刻 uni.navigateBack 或 uni.reLaunch,Toast 会因当前页面实例销毁而一闪即逝。真机上尤其明显,开发者工具反而容易“侥幸”看到。
关键不是加 delay,而是让 Toast 有完整生命周期:
-
uni.showToast({ duration: 1500 })后,跳转至少延迟1600ms(比 duration 多 100ms) - 避免在
onLoad或onShow开头就调用,可套一层setTimeout(() => {}, 50)或nextTick - 如果跳转是必须的(比如复制后回首页),改用
onHide+ 缓存提示文案,在目标页onShow中触发 toast
z-index 冲突导致 Toast “隐身”,但改局部样式没用
你写的 .page { z-index: 9999 } 对 uni.showToast 完全无效——因为它根本不在你的页面 DOM 树里。UniApp 把 toast 渲染在 App 根节点层级,局部样式作用域压根触达不到。
唯一可靠解法只有一处:
- 打开
App.vue的块 - 加这两行(注意选择器必须精准):
.uni-toast { z-index: 999999 !important; }.uni-modal { z-index: 999998 !important; } - 不要用 class 名或自定义类名去覆盖,框架生成的类名就是
uni-toast
安卓/iOS/小程序三端表现不一致,别硬扛
同一段代码,在微信小程序可能正常,在 App 端 toast 位置偏上、H5 端又偏下;iOS 上文字截断更狠(两行强制省略),安卓反而能撑三行。这不是 bug,是各端原生组件实现差异。
务实策略是收口控制:
- 文本长度严格限制在 24 字以内(含标点),避免跨端截断不可控
- 禁用
icon: 'none'时的长文本,改用image+ 短标题组合 - 对重要提示(如“复制成功”),直接换
uni.showModal,它支持多行且层级稳定 - 若项目已引入 uView,优先用
,它绕过原生限制,DOM 可控、样式可定制
真正麻烦的不是“怎么让它显示”,而是“怎么让它在所有端都按你预期的方式显示”。很多问题表面是 API 不生效,实际是跨端渲染机制和时机没对齐。动手前,先确认你面对的是哪一层的问题:是运行时拦截、DOM 层级、还是平台特性。











