在小程序中/uni-app中,当没有登录时,点击结算按钮,3s后自动跳转到登录页面

1、首先在methods中定义一个方法showTips,用于展示倒计时的提示消息

复制代码
// 展示倒计时的提示消息
	showTips(n){
	// 调用uni.showToast()方法,展示提示消息
	  uni.showToast({
	// 不展示任何图标
	  icon:'none',
	// 提示的消息
	  title:'请登录后在结算!' +n+'秒后自动跳转到登录页',
	// 微页面添加透明遮罩层,防止点击穿透
	  mask:'',
	// 1.5s后小时
	  duration:1500
	})
}

2、在data中创建一个倒计时的秒数

复制代码
data() {
	return {
	// 倒计时的秒数
		seconds:3
	};
	},

3。点击结算按钮时判断用户是否登录了,如果没有,则调用 delaynavigate()进行倒计时的导航跳转

复制代码
settlement(){
	// 最后判断用户是否登录了,如果没有,则调用 delaynavigate()进行倒计时的导航跳转
	   if(!this.token) return this.delaynavigate()
	},

4、创建delaynavigate方法,延迟导航到我的页面

复制代码
delaynavigate(){
 // 展示提示消息,此时seconds 的值等于3
   this.showTips(this.seconds)
 // 创建计时器,每个一秒执行一次
	setInterval(()=>{
 // 先让秒数自减一
	 this.seconds--
 // 根据最新的秒数,进行消息提示
	 this.showTips(this.seconds)
					   
	},1000)
},
注意,此时定时器不会自动停止,此时秒数会出现等于0或者小于0的情况,解决方法

1、在data节点中声明定时器的id

复制代码
data() {
	return {
	// 倒计时的秒数
		seconds:3,
   //定时器的id
        timer:null
	};
	},

2、改造delaynavigate方法

复制代码
	      delaynavigate() {
				// 展示提示消息,此时seconds 的值等于3
				this.showTips(this.seconds)
				// 创建计时器,每个一秒执行一次
				// 将定时器的id存储到timer中
				this.timer = setInterval(() => {
					// 先让秒数自减一
					this.seconds--
					if (this.seconds <= 0) {
						// 清除定时器
						clearInterval(this.timer)
						// 跳转到我的页面
						uni.switchTab({
							url: '/pages/my/my'
						})

						return
					}
					// 根据最新的秒数,进行消息提示
					this.showTips(this.seconds)

				}, 1000)


			},

这样就可以实现啦!

相关推荐
海兰24 分钟前
【web应用】Excel 项目数据自动化分析系统(AI 驱动分析)详细设计与部署指南(附源代码)
前端·人工智能·自动化·excel
2501_9400417427 分钟前
技术分享:高质量全栈开发提示词设计实践 —— 覆盖简单到复杂
前端·prompt
IT_陈寒1 小时前
Python的os.path.join居然能这么坑?
前端·人工智能·后端
艳阳天_.1 小时前
星瀚弹框页面实现
java·前端·python
EdgeOne边缘安全加速平台1 小时前
EdgeOne Web 防护×AI 升级:让 AI 既参与攻击识别,也参与误报纠错
前端·人工智能·腾讯云·edgeone
nuIl1 小时前
实现一个 Coding Agent(6):并行工具调用
前端·ai编程·cursor
Rain5091 小时前
2.1 Nest.js 项目初始化与模块化架构
开发语言·前端·javascript·后端·架构·数据分析·node.js
cjp5601 小时前
009. ASP.NET WEB API 用户关联esp32设备
前端·后端·asp.net
Insseals2 小时前
因斯特浮动模块快速接头✨五大核心优势
前端
沐土Arvin2 小时前
港澳台行政区域json
前端