小程序倒计时页面跳转

通常我们打开 APP 时，都会倒计时 5s, 5 s过后自动跳转到相应的页面，进入页面同时，清除原来的页面，同时不带返回箭头。

先上效果图：

HTML:

[code]<view class='container'>
<view class="welcome">
<image src="../../img/logo.png"></image>
<view class='bottom'>
<text class='title'>您生活的小助手</text>
<button catchtap="goHome">Welcome</button>
</view>
</view>

<text class='time'>{{time}}s</text>
</view>

JS:

通过 setInterval 对时间倒计时操作，同时判断 time 小于等于零时，清除计时器，同时跳转页面。

使用  wx.reLaunch 关闭所有页面，打开到应用内的某个页面。

[code]/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
//5s后跳转
this.data.Time = setInterval(() => {
this.setData({
time: --this.data.time
})
if (this.data.time <= 0) {
clearInterval(this.data.Time)
this.goHome()
}
}, 1000)
},
goHome() {
clearInterval(this.data.Time)
wx.reLaunch({
url: '../index/index'
})
},

[code]data: {
time: 3,
},

CSS:

[code].container {
width:100%;
height:100vh;
background: #00AFBE;
}
.welcome {
width: 100%;
height:100%;
display:flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
.title{
color:#fff;
margin-top:80rpx;
font-weight:900
}
.welcome .bottom{
justify-content: flex-end
}
.welcome image {
width: 120px;
height: 120px;
}

.welcome button {
background: #00AFBE;
color: #fff;
width: 260rpx;
height:80rpx;
opacity: 0;
font-size:32rpx;
animation: op 1s infinite;
line-height: 80rpx;
border:1px solid #fff;
margin:40rpx 0

}

@keyframes op {
0% {
opacity: 0;
}

30% {
opacity: 0.3;
}

60% {
opacity: 0.6;
}

90% {
opacity: 0.9;
color: #fff;
}

100% {
opacity: 1;
}
}
.time {
height: 40rpx;
color: #fff;
font-size: 24rpx;
position: absolute;
bottom: 5px;
border-radius: 5px;
line-height: 40rpx;
right: 60rpx;
padding:0 20rpx;
border:1rpx solid #fff
}