uniapp弹框优先级
uniapp弹框优先级控制方法
在uniapp中，弹框优先级通常涉及多个组件（如uni.showModal、uni.showToast、自定义弹窗等）的叠加显示逻辑。以下是控制优先级的核心方案：
层级控制（z-index）
通过CSS的z-index属性直接定义弹窗层级，数值越大优先级越高。例如自定义弹窗的样式：
.custom-modal {
z-index: 9999;
position: fixed;
}组件生命周期管理
利用v-if或uni.$emit/uni.$on控制弹窗显示顺序。高优先级弹窗出现时，自动关闭低优先级弹窗：
// 高优先级弹窗触发时
uni.$emit('closeLowPriorityModal');队列机制 通过数组存储弹窗请求，按优先级排序后依次显示：
const modalQueue = [];
function addModal(options, priority) {
modalQueue.push({options, priority});
modalQueue.sort((a,b) => b.priority - a.priority);
}系统弹窗与自定义弹窗冲突解决
强制关闭低优先级弹窗
调用uni.hideToast()等API先关闭系统级弹窗，再显示自定义弹窗：
uni.hideToast();
this.showCustomModal();延时显示策略
通过setTimeout确保高优先级弹窗最后渲染：
setTimeout(() => {
uni.showModal({title: '紧急通知'});
}, 50);实际应用场景示例
登录拦截弹窗（最高优先级） 用户操作触发支付时，若未登录则立即中断当前流程，显示登录弹窗：
function checkLogin() {
if (!isLogin) {
uni.showModal({
title: '请先登录',
confirmText: '去登录',
cancelText: '取消'
});
return false;
}
return true;
}Toast提示（最低优先级）
普通提示信息采用showToast，设置较短显示时间且不可打断操作：
uni.showToast({
title: '保存成功',
icon: 'none',
duration: 1500
});注意事项
- 安卓平台部分机型可能存在原生弹窗层级高于Webview的问题，需测试真机表现
- 避免同时显示多个模态弹窗（如
showModal叠加），会导致界面锁死 - 使用
plus.nativeUI调用原生弹窗时，优先级始终高于HTML5弹窗组件
