折叠何宝莹

使用 Vue.js 写一个简单的倒计时

背景:

商品支付完有一个支付结果页面, 这个页面需要添加一个倒计时,自动跳转到订单详情/团购详情页面.

原理:

新建一个 interval,每隔一秒更新秒数。
当秒数达到0的时候,销毁这个interval,并且跳转到指定页面,
下面是代码部分:
data 里面定义好数据:

1
2
3
countDownTime: 5,
countDownText: '页面将在5s后自动跳转',
intervalToken: -1,

然后在 js 里面写逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
mCreated: function () {
this.countdown();
},
countdown: function () {
console.log('打印倒时器', this.countDownText, this.countDownTime);
const that = this;
this.intervalToken = setInterval(() => {
console.log('打印倒时器 interval 内', this.countDownText, this.countDownTime);
if (this.countDownTime <= 1) {
// 倒计时结束后跳转的页面
this.mBack();
}
that.updateCountDownText();
}, 1000);
},
updateCountDownText: function () {
this.countDownTime = this.countDownTime - 1;
this.countDownText = `页面将在${this.countDownTime}s后自动跳转`;
},
viewdisappear: function () {
clearInterval(this.intervalToken);
},

注意在页面头部写一个 viewdisappear 事件. 在页面消失的时候销毁 setInterval, 否则页面一直进入循环

1
<div @viewdisappear="viewdisappear">