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 的值等于3this.showTips(this.seconds)// 创建计时器,每个一秒执行一次setInterval(()=>{// 先让秒数自减一this.seconds--// 根据最新的秒数,进行消息提示this.showTips(this.seconds)},1000) },
注意,此时定时器不会自动停止,此时秒数会出现等于0或者小于0的情况,解决方法
1、在data节点中声明定时器的id
data() {return {// 倒计时的秒数seconds:3,//定时器的idtimer:null};},
2、改造delaynavigate方法
delaynavigate() {// 展示提示消息,此时seconds 的值等于3this.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)},
这样就可以实现啦!