当前位置: 首页 > news >正文

uniapp中uni.showToast和 uni.showLoading同时使用时出现提示中断冲突问题。

以下代码实现了一个增强版的加载状态管理器,主要功能包括Loading状态管理和Toast队列管理,解决了Loading和Toast冲突的问题。

/*** 加载状态管理器(增强版)* 新增特性:* 1. Toast队列管理* 2. 自动处理Loading和Toast的冲突*/
export const loadingManager = {_isLoading: false,_currentLoading: null,_toastQueue: [], // 待显示的Toast队列/*** 显示加载提示* @param {String} title 提示文字*/show: function(title = '加载中...') {if (this._isLoading) return;try {// 清除当前可能存在的Toastuni.hideToast();this._currentLoading = uni.showLoading({title,mask: true});this._isLoading = true;} catch (e) {console.error('showLoading error:', e);}},/*** 隐藏加载提示* 会自动处理待显示的Toast*/hide: function() {if (!this._isLoading) return;try {uni.hideLoading();} catch (e) {console.warn('hideLoading error:', e);} finally {this._isLoading = false;this._currentLoading = null;// 处理队列中的Toastthis._processToastQueue();}},/*** 切换加载状态* @param {Boolean} loading 是否显示加载* @param {String} title 提示文字*/toggle: function(loading, title) {loading ? this.show(title) : this.hide();},/*** 内部方法:处理Toast队列*/_processToastQueue: function() {if (this._toastQueue.length > 0) {const nextToast = this._toastQueue.shift();setTimeout(() => {uni.showToast(nextToast);// 递归处理剩余Toastthis._processToastQueue();}, 350); // 适当延迟确保UI过渡}},/*** 安全显示Toast(新增方法)* @param {Object} options Toast配置*/safeToast: function(options) {if (this._isLoading) {// 如果正在loading,将Toast加入队列this._toastQueue.push(options);} else {// 直接显示Toastuni.showToast(options);}}
};/*** 增强版Toast提示* 自动处理与Loading的冲突* @param {Object} options 配置对象*/
export const toast = (options) => {const config = {icon: 'none',duration: 2000,mask: false,...options};// 使用安全版ToastloadingManager.safeToast(config);
};

使用示例

// 引入后再使用
// 显示加载提示
loadingManager.show();
//  隐藏加载提示
loadingManager.hide();
// 显示提示toast({//传入配置对象title: '提示内容'});
http://www.dtcms.com/a/335451.html

相关文章:

  • Maven 开发实践
  • Java ConcurrentHashMap 深度解析
  • Mitt 事件发射器完全指南:200字节的轻量级解决方案
  • Git 命令指南:从 0 到熟练、从常用到“几乎全集”(含常见报错与解决)建议收藏!!!
  • Leetcode 深度优先搜索 (2)
  • Java多线程进阶-JUC之ReentrantLock与Callable
  • Oracle algorithm的含义
  • 【牛客刷题】01字符串按递增长度截取并转换为十进制数值
  • 26. 值传递和引用传递的区别的什么?为什么说Java中只有值传递
  • 告别“测试滞后”:AI实时测试工具在敏捷开发中的落地经验
  • 【JavaEE】多线程 -- 单例模式
  • 基于Python的情感分析与情绪识别技术深度解析
  • 锂电池SOH预测 | Matlab基于KPCA-PLO-Transformer-LSTM的的锂电池健康状态估计(锂电池SOH预测),附锂电池最新文章汇集
  • CVPR2 2025丨大模型创新技巧:文档+语音+视频“大模型三件套”
  • 音频分类标注工具
  • 91.解码方法
  • GaussDB 数据库架构师修炼(十三)安全管理(5)-全密态数据库
  • 17.5 展示购物车缩略信息
  • JMeter(进阶篇)
  • 3D打印——给开发板做外壳
  • 蓝凌EKP产品:JSP 性能优化和 JSTL/EL要点检查列表
  • Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
  • Docker之自定义jkd镜像上传阿里云
  • Spring AI 集成阿里云百炼平台
  • vscode无法检测到typescript环境解决办法
  • SpringCloud 03 负载均衡
  • 向量数据库基础和实践 (Faiss)
  • QT 基础聊天应用项目文档
  • Flutter vs Pygame 桌面应用开发对比分析
  • Android原生(Kotlin)与Flutter混合开发 - 设备控制与状态同步解决方案