E企盈营销工具技术服务商 热线:4006-838-530

小程序倒计时页面跳转

E企盈直播平台营销卖货系统

通常我们打开 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/viewJS:通过 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}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序倒计时页面跳转
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏