通常我们打开 APP 时,都会倒计时 5s, 5 s过后自动跳转到相应的页面,进入页面同时,清除原来的页面,同时不带返回箭头。
先上效果图:
HTML:
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/viewJS:
通过 setInterval 对时间倒计时操作,同时判断 time 小于等于零时,清除计时器,同时跳转页面。
使用 wx.reLaunch 关闭所有页面,打开到应用内的某个页面。
/** * 生命周期函数--监听页面初次渲染完成 */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' })},data: { time: 3,},CSS:
.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}













