首页 > 其他分享 >uniapp多次触发跳转问题

uniapp多次触发跳转问题

时间:2024-12-12 16:12:32浏览次数:10  
标签:uniapp obj ToClass 触发 void time 跳转 页面

问题描述:快速点击跳转页面后会闪退到登陆页面

解决方案:重新封装uniapp跳转api,加防抖锁,To.ts

  import { NavigateToOptions, RedirectToOptions, ReLaunchOptions, SwitchTabOptions } from 'uni-app';

  interface ToImplements {
      navigateTo(obj: NavigateToOptions): void;
      redirectTo(obj: RedirectToOptions): void;
      reLaunch(obj: ReLaunchOptions): void;
      switchTab(obj: SwitchTabOptions): void;
  }

  class ToClass implements ToImplements {
      private static instance: ToClass | null = null;
      private time: number;
      private lock: boolean;

      private constructor(time: number = 500) {
          this.time = time;
          this.lock = false;
      }

      // 单例模式,确保只有一个实例
      public static getInstance(time?: number): ToClass {
          if (!ToClass.instance) {
              ToClass.instance = new ToClass(time);
          }
          return ToClass.instance;
      }

      // 私有方法,用于执行导航操作并设置锁
      private navigateAndLock<T extends (...args: any[]) => void>(func: T, obj: Parameters<T>[0]): void {
          if (this.lock) return;
          this.lock = true;
          func(obj);
          setTimeout(() => {
              this.lock = false;
          }, this.time);
      }

      // 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
      navigateTo(obj: NavigateToOptions): void {
          this.navigateAndLock(uni.navigateTo, obj);
      }

      // 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
      redirectTo(obj: RedirectToOptions): void {
          this.navigateAndLock(uni.redirectTo, obj);
      }

      // 关闭所有页面,打开应用内的某个页面
      reLaunch(obj: ReLaunchOptions): void {
          this.navigateAndLock(uni.reLaunch, obj);
      }

      // 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
      switchTab(obj: SwitchTabOptions): void {
          this.navigateAndLock(uni.switchTab, obj);
      }
  }

  // 获取单例实例
  export const useUni = ToClass.getInstance();

使用方法

  import { useUni } from '@/hooks/To'  
    useUni.navigateTo({         url: `/pages/admin/components/details?id=` + id,     })

 

标签:uniapp,obj,ToClass,触发,void,time,跳转,页面
From: https://www.cnblogs.com/Wei-notes/p/18602821

相关文章

  • IIS重写,HTTPS跳转等问题收集
     一、安装 ApplicationRequestRoutingCache二、安装URL重写 rewrite_amd64_zh-CN.msi应用程序请求路由设置1、打开IIS工具,选择上面安装的请求路由2、选择ServerProxySettings3、在中间区域,选择勾选Enableproxy,不用修改内容,当然也可以根据需求自己修改......
  • ThinkPHP+Uniapp二手车置换平台小程序系统源码
    二手车置换平台小程序系统微信小程序+抖音小程序双端数据同步基于ThinkPHP+Uniapp开发的一款二手车置换平台小程序系统,为买家和卖家提供了一个交流和交易的平台,促进了二手车市场的发展!车辆发布:自主发布车辆信息圈子交流:可以在圈子进行信息交流数据统计:每日的访客数量,留言......
  • Thinkphp后端管理系统+Uniapp客户端社区团购(仅支持微信小程序)
    Shopro社区团购(小程序版)基于Thinkphp后端管理系统+Uniapp客户端(仅支持微信小程序)开发,生鲜果蔬社区团购的不二之选、快速搭建社区团购平台、让你的产品走进上千个社区。线上团购+线下自提,玩转社区消费新模式提供专业、优质的社区团购解决方案!自提点1.选择自提点可根据定......
  • UniApp 全局使用uni.getSystemInfoSync()的坑,你中招了吗
    UniApp全局使用uni.getSystemInfoSync()的坑,你中招了吗标签:uni-app,设备信息,Vue.prototype,windowHeight,uview-plus最近写UniApp的时候,有小伙伴问了我一个问题:“每次用uni.getSystemInfoSync()获取设备信息太麻烦了,能不能全局赋值一次,哪里用直接拿?”乍一听很合理......
  • 酷柚易汛进销存系统PHP+Uniapp
    移动端订货通、商品管理、库存管理、订单管理、客户管理、供应商、财务管理、经营分析版本更新V1.6.41、新增供应商分类不可添加重复类别2、新增客户分类不可添加重复类别3、新增商品分类不可添加重复类别4、新增支出类别不可添加重复类别5、新增收入类别不可添加重复类别6、......
  • 酷柚易汛生产管理系统PHP+Uniapp
    生产管理系统,帮助企业数字化转型,打造智能工厂,专业为生产企业量身开发的一套完整的生产管理系统。主要包含以下模块:购货模块、生产模块、仓库模块、资料模块,可配合酷柚易汛进销存无缝衔接使用。产品理念:共享功能:信息共享:产品支持企业内部各部门之间的信息共享,确保信息的......
  • 酷柚易汛进销存系统PHP+Uniapp
    移动端订货通、商品管理、库存管理、订单管理、客户管理、供应商、财务管理、经营分析版本更新V1.6.41、新增供应商分类不可添加重复类别2、新增客户分类不可添加重复类别3、新增商品分类不可添加重复类别4、新增支出类别不可添加重复类别5、新增收入类别不可添加重复类......
  • 电商供应链ERP管理系统PHP+Uniapp
    功能特性多角色权限管理:支持管理员、运营、供应商等多重层级账号。允许不同级别的账户集中管理商品信息。统一商品管理:商品资料可以共享到多个销售平台。提供集中管理的便利性。多货源管理:支持自营和第三方供应商的货源管理。库存信息统一管理。多渠道管理:汇......
  • 基于java的SpringBoot/SSM+Vue+uniapp的校园博客系统的详细设计和实现(源码+lw+部署文
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于java的SpringBoot/SSM+Vue+uniapp的旅游管理系统的详细设计和实现(源码+lw+部署文
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......