3s倒計時.png

小程序 - 3秒倒計時跳轉+點擊跳轉

wxml

<view>
    <view class="register_success">
        <image src="../../images/register_success.png"></image>
    </view>
    <rich-text>{{success_text}}</rich-text>
    <view style="height:182rpx"></view>
    <view class="next_button">
        <button class="next_button" type="{{buttonType}}" disabled="{{disabled}}"  catchtap="closePage">{{time}}s關閉頁面</button>
    </view>
</view>

js

Page({
    data: {
        success_text : '注冊成功!', 
        time:3,
    },
    onReady: function () {
     //3s后跳轉
     this.data.Time = setInterval(() => {
      this.setData({
        time: --this.data.time
      })
      if (this.data.time <= 0) {
        clearInterval(this.data.Time)
        this.closePage()
      }
    }, 1000)
  },
})

wxss

/* pages/register_success/register_success.wxss */

.register_success {
  width: 186rpx;
  height: 186rpx;
  margin: 0 auto;
  margin-top: 160rpx;
}
.register_success image {
  width: 100%;
  height: 100%;
  display: block;
}
 rich-text {
  text-align: center;
  margin-top: 60rpx;
  font-size: 40urpx;
  color: #505050;
  display: block;
}
.next_button {
  background-color: #ed1b24;
  color: #ffffff;
  margin: 0 60rpx;
  border-radius: 50rpx;
  height: 88rpx;
  line-height: 60rpx;
}