开始页面倒计时跳转到首页

[yangkaiyangyi]

通常我们打开 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,
},