小程序倒计时页面跳转

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

小程序倒计时页面跳转相关推荐

uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
小程序开发页面跳转传参问题
小程序开发页面跳转传参问题 1.简单值 let id=1; wx.navigateTo({ url:'/pages/mypage/mypage?id='+id }) 取值另一个页面 onload:f ...
微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...
微信小程序--简单页面跳转
微信小程序--简单页面跳转例如:点击一个text ,跳转入一个新的页面blueberry.wxml 首先对text 设置监听事件 <view bindtap="toast" ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
参数携带跳转_微信小程序：页面跳转及参数传递
本文首发自个人自有博客:[FaxMiao个人博客],一个关注Web前端开发技术.关注用户体验.记录前端点滴,坚持更多原创,为大家提供高质量技术博文! 前言小程序的跳转方法有很多种,有的人一直只用wx ...
微信小程序开发系列七：微信小程序的页面跳转
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序：页面跳转时传递数据到另一个页面
一.功能描述页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...
微信小程序中页面跳转时要始终返回首页的问题
首先,要先说一下项目的需求,我要实现的功能是在首页有一个按钮可以跳转到一个展示的页面,这个展示的页面上下两个部分,上边的部分是可以切换学科种类的,下面的部分可以展示这个学科下的所有科目,上面切换的部 ...
微信小程序开发-页面跳转的几种方式
最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:"保留当前页面,跳转到应用内的某个 ...

小程序倒计时页面跳转

小程序倒计时页面跳转相关推荐

最新文章

热门文章