微信小程序实现 3秒后自动跳转到指定页面

2023-11-03

需求描述:在某个页面,当用户点击 按钮 时,如果用户没有登录,则 3 秒后自动跳转到登录页面

思路: 

        1.判断用户有没有进行登录,如果没有登录,那么就调用this.delayTime()这个方法

        2.首先写一个展示弹框的方法 this.showTips()

        3.在this.delayTime()里面进行延时器以及页面跳转的操作

1. 首先在判断用户是否登录的地方调用专门用来实现倒计时功能的方法

// 如果没有token,则判断用户是没有登录的,调用this.delayTime()
if(!this.token) return this.delayTime()

2.实现倒计时跳转功能的方法

    data() {
      return {
           time: 3,       // 倒计时的秒数
           timeId: null   // 定时器ID
      };
    },
methods: {
       // 专门用来展示倒计时以及页面跳转的方法
       delayTime() {
         // 1.每次点击结算,都需要将倒计时秒数还原
         this.time = 3
         // 2.展示倒计时弹框
         this.showTips(this.time)
         // 3.使用setInterval 实现倒计时
         this.timeId = setInterval(() => {
              // 3.1 秒数每次减1
           this.time -= 1
              // 3.3 做一个判断,如果秒数为0的话清除定时器
           if(this.time <= 0) {
             clearInterval(this.timeId)
              // 3.4 进行页面跳转
             uni.switchTab({
               url:'/pages/my/my'
             })
             return
           }
           // 3.2  定时器每循环一次调一次弹窗
           this.showTips(this.time)
         },1000)
       },


       // 弹窗方法 
       showTips(n) {
         // 调用 uni.showToast() 方法,展示提示消息
         uni.showToast({
           icon:'none',   // 不展示任何图标
           duration:1500,  // 1.5 秒后自动消失
           mask:true,   // 为页面添加透明遮罩,防止点击穿透
           title:'请登录后再结算!' + n + ' 秒后自动跳转到登录页',
         })
       }

    }

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序实现 3秒后自动跳转到指定页面 的相关文章

  • ifconfig命令无法识别,提示“Command 'ifconfig' is available in '/sbin/ifconfig'”

    有台虚拟机 用的时候发现ifconfig命令不好用了 提示如下 Command ifconfig is available in sbin ifconfig The command could not be located because
  • 需求:vue用流程图展示数据

    问题描述 如标题所示 粗略的写了一版 没有细化 UI 红框的地方本来想用canvas自己写 但是找资料的时候发现了一个插件LeaderLine 非常符合要求 然后发现了一篇文章vue横向树级组件 流程图 组件递归 套用了一下 然后按照自己的
  • 将json-bigint处理为数值分区数组的字段全部自动转为字符串

    json bigint虽然能帮我们处理好id 但 他的模式 显然不是直接可以用的 我们如果要到业务逻辑单独处理 那就太麻烦了 对系统也非常不友好 我们可以在vue项目中 src目录下创建一个utils 下面创建一个conversionLon
  • 线程共享&&独有

    线程共享 进程代码段 进程的公有数据 利用这些共享数据 线程很容易的实现相互之间的通讯 进程打开的文件描述符 信号的处理器 进程的当前目录和进程用户ID与进程组ID 线程独有 线程ID 桟 错误返回码 error 线程优先级
  • IDEA配置仓库提交简易说明

    1 码云注册并创建仓库 2 IDEA顶部菜单VCS 如果没有 删除代码文件夹里面的 git文件 3 Create git 4 选择需要提交的代码文件夹 5 IDEA顶部菜单Git 6 Commit 提交暂存 选择需要提交的代码文件 选择Co
  • SQLi LABS Less-18

    第十八关请求方式为 GET请求 注入点为 User Agent 注入方式为 错误注入 第一步 判断注入方式 先看源码 后台代码对 特殊字符进行了过滤 常规的注入方式行不通 只有通过代码审计来判断注入方式 登录成功后 有一个保存用户主机信息的
  • 文本三剑客之sed

    sed简介 sed 是Linux中提供的一个外部命令 他是一个行 流 编辑器 非交互式的对文件内容进项增删改查操作 那它和文本编辑器有什么区别呢 区别是 文本编辑器 编辑对象是文件 行编辑器 编辑对象是文件中的行 也就是前者一次处理一个文本
  • Anaconda使用conda连接网络时,出现网络错误CondaHTTPError(包括Anaconda安装与入门)

    今天准备安一个Anaconda来管理我的Python环境 在官网下载支持Python3 7的版本 直接安装即可 使用Anaconda Navigator可以方便地创建环境和管理各种外部包 conda version 查看版本 是否安装成功

随机推荐

  • element-ui 中标签el-select选中无反应问题

    el select标签 如果外部还嵌套循环 点击选中标签无反应 删除也不好使 原因由于层次太多 导致render函数没有自动更新 在el select标签内加入 change forceUpdate 强制刷新视图即可
  • 怎样删除Github中的项目

    我们在GitHub上创建项目的时候 如果想要删除当前项目 怎样进行操作呢 下面就简单介绍一下怎样去删除GitHub中的项目 1 选择要删除的项目 2 进入项目中的setting 设置 中 3 一直下拉 看到有红色字体出现 进入Danger
  • 都2022年了,出去面试连分布式锁的源码你都不会画?

    V xin ruyuanhadeng获得600 页原创精品文章汇总PDF 目录 一 写在前面 二 Redisson实现Redis分布式锁的底层原理 1 加锁机制 2 锁互斥机制 3 watch dog自动延期机制 4 可重入加锁机制 5 锁
  • Linux基础笔记17

    磁盘基础概念知识 计算机主要存储媒介之一 由一个或多个铝制 玻璃的碟片组成 碟片外覆盖具有铁磁性材料 磁盘内部由磁道 柱面 扇区 磁头等关键部位组成 Linux 系统中硬件设备文件放在 dev 下 不同磁盘接口 系统识别的设备名称不一样 I
  • MySQL查询操作

    MySQL查询操作 1 建表 CREATE TABLE 学生 学号 char 7 NOT NULL PRIMARY KEY 姓名 char 8 NOT NULL 性别 char 2 年龄 tinyint 入学时间 datetime 专业 v
  • 【科普贴】MOS管开关原理及应用详解

    前言 MOS管通常被用作电源开关使用 通常使用PMOS做为上管 将NMOS做为下管使用 当然也有反过来使用的场景 但使用较少 此贴为科普贴 就不做累述了 MOS原理介绍 1 NMOS管介绍 电流方向从D S 漏极流向源极 导通条件为VGS有
  • i.mx287学习笔记4-使用QT控制LED

    上面是我的微信和QQ群 欢迎新朋友的加入 目录 1 安装QT CREATOR 2 硬件连接 3 驱动源码 4 编译驱动 测试驱动 5 创建QT界面 6 编译QT 7 运行 8 源码 1 安装QT CREATOR sudo apt get i
  • AVPlayer 播放的时候有黑色边

    iOS视频开发中 使用系统的AVPlayer的几率非常高 然 在部分Plus机型会出现黑边的情况 平时不容易发现 但你的视频若是白色色调 就比较明显 解决方法 修改AVPlayerLayer的属性 使playerLayer光栅化 即位图化
  • python需要学多长时间

    随着人工智能和机器学习的持续升温 Python 目前是首选的AI语言 在数据科学和AI中占据主导地位 而且随着互联网的发展 Python的应用越来越广泛 学习Python的人也越来越多 主要是因为Python门槛低 上手很快 而且通用性和实
  • npm ERR! 400/403 Bad Request - PUT https://registry.npmjs.org/xxx- “xxx“ is invalid for new packages

    npm ERR 403 403 Forbidden PUT https registry npmjs org df ui You do not have permission to publish df ui Are you logged
  • TypeError: 'builtin_function_or_method' object is not subscriptable的一种错误情况

    TypeError builtin function or method object is not subscriptable的一种错误情况 初学python 今天在做练习时为一个Error苦恼了很久 最终找到了解决方法 错误代码块如下
  • Contrastive Self-Supervised Learning 的对比学习框架和设计新方法

    翻译自 建议阅读原文 https towardsdatascience com a framework for contrastive self supervised learning and designing a new approac
  • OpenGL点精灵(Point Sprite)

    From http iiunknown blogbus com logs 48250551 html 在很多粒子的demo中 看到把粒子显示成一个个小球 如果你以为那是用glutSolidShpere画出来的话 你就错了 上万个粒子 每个球
  • 织梦网站服务器配置未见,DedeCms系统配置参数无法显示的解决方法

    Dedecms后台系统基本参数不显示的原因 这个是我使用dedecms建站来遇到的问题 到dedecms官方看了下 什么玩意的信息都没有 蛋疼的官方 对于我们这等草根来说dedecms官方基本没有指导作用 都是论坛的会员在哪儿里互相帮助 此
  • 患病率对 Delta 和样本量的影响 - 使用 R 语言进行计算

    患病率对 Delta 和样本量的影响 使用 R 语言进行计算 概述 在研究和实验设计中 样本量是一个重要的考虑因素 样本量的确定需要考虑多个因素 其中之一是患病率 即事件发生的概率 患病率的不同取值会对所需的样本量和效果大小 Delta 产
  • Flutter学习六:GestureDetector练习

    在Android中所有View都可以设置OnClick事件 但是在Flutter中除开少数自带Press事件的widget 大部分控件都是不带事件的 如果需要添加事件 就可以用GestureDetector作为父widget包裹需要添加事件
  • 华为OD真题练习

    华为OD真题练习 华为OD机考真题练习 题目描述 任务混部 公司创新实验室正在研究如何最小化资源成本 最大化资源利用率 请你设计算法帮他们解决一个任务混部问题 有taskNum项任务 每个任务有开始时间 startTime 结束时间 end
  • 获取ItemsControl中当前item的binding数据

    直接用 Binding 就可以了 如下
  • 负载均衡策略之AbstractLoadBalancerRule和RandomRule源码解读

    一 负载均衡类图 二 AbstractLoadBalancerRule解读 负载均衡策略的抽象类 public abstract class AbstractLoadBalancerRule implements IRule IClient
  • 微信小程序实现 3秒后自动跳转到指定页面

    需求描述 在某个页面 当用户点击 按钮 时 如果用户没有登录 则 3 秒后自动跳转到登录页面 思路 1 判断用户有没有进行登录 如果没有登录 那么就调用this delayTime 这个方法 2 首先写一个展示弹框的方法 this show