小程序倒计时页面跳转

通常我们打开 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>
</view>

JS:

通过 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
}