当前位置: 首页 > 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.lryc.cn/news/623578.html

相关文章:

  • 《告别 if-else 迷宫:Python 策略模式 (Strategy Pattern) 的优雅之道》
  • 【Tech Arch】Hive技术解析:大数据仓库的SQL桥梁
  • 在 Element UI 的 el-table 中实现某行标红并显示删除线
  • Java 大视界 -- 基于 Java 的大数据分布式计算在气象灾害预警与应急响应中的应用
  • 图论水题4
  • 01数据结构-插入排序
  • Tomcat Session Replication Cluster:实现高可用性和可扩展性的关键
  • 用MTEB对Embedding模型进行benchmark
  • LeeCode 39.组合总和
  • 【抽象类和接口】
  • OpenAI 发布了 GPT-5,有哪些新特性值得关注?国内怎么使用GPT5?
  • CentOS启动两个MySQL实例
  • 校园综合数据分析可视化大屏 -Vue纯前端静态页面项目
  • 【Virtual Globe 渲染技术笔记】6 着色
  • IDE/去读懂STM32CubeMX 时钟配置图(有源/无源晶振、旁路/晶振模式、倍频/分频)
  • Mitt 事件发射器完全指南:200字节的轻量级解决方案
  • 【UEFI系列】ACPI
  • 剑指offer第2版——面试题6:从尾到头打印链表
  • tcp会无限次重传吗
  • API网关实施中典型陷阱
  • 什么叫作数据处理?数据处理和数据治理是什么关系
  • AntSK-PyAPI技术深度解析:打造企业级文本嵌入向量服务的完整指南
  • Ansible 核心功能进阶:自动化任务的灵活控制与管理
  • 为什么TCP连接是三次握手?不是四次两次?
  • day43_2025-08-17
  • Python爬虫-解决爬取政务网站的附件,找不到附件链接的问题
  • k8s-单主机Master集群部署+单个pod部署lnmp论坛服务(小白的“升级打怪”成长之路)
  • BEVFusion(2022-2023年)版本中文翻译解读+相关命令
  • Qt——主窗口 mainWindow
  • Gradle快速入门学习