小程序倒计时页面跳转

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

最后

以上就是英俊斑马为你收集整理的小程序倒计时页面跳转的全部内容，希望文章能够帮你解决小程序倒计时页面跳转所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。