微信小程序> 小程序倒计时页面跳转

小程序倒计时页面跳转

浏览量:1987 时间: 来源:qq_36437172

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

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎