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) },
这样就可以实现啦!