uniapp小程序实现开屏页

需求：小程序开屏页持续1.5秒后逐步消失进入首页

1、绑定动画设置动画执行动画的标签

:animation="animationData"

2、创建一个实例

uni.createAnimation({
duration: 1500,
timingFunction: "ease",
delay: 0
})

3、描述动画

animation.opacity(1).step()

4、导出动画数据

this.animationData = animation.export()

因为进入登录或者是首页都需要开屏页，所以开屏页要判断是否登录以及token是否失效的问题

代码如下

<template><view class="commonPadding loginPage" :animation="animationData"><image :src="$resourceUrl()+'/open-first-page.png'" alt=""></image></view>
</template><script>export default {onLoad() {this.goto()},data() {return {animationData: {}}},methods: {goto(immediately) {new Promise((resolve, reject) => {if (immediately) {resolve(0)}//创建动画实例let animation = uni.createAnimation({duration: 1500,timingFunction: "ease",delay: 0})this.animation = animation//描绘动画效果animation.opacity(1).step()//导出动画数据this.animationData = animation.export()setTimeout(function() {animation.opacity(0).step()this.animationData = animation.export()resolve(1500)}.bind(this), 500)//bind(this)是es6的function的一个原型方法，会使得函数的this必定指向调用他的对象}).then((timeout) => {var SUID = uni.getStorageSync('token');let urlif (SUID) {setTimeout(() => {uni.reLaunch({url: '/pages/switch/index/index',})}, timeout)} else {setTimeout(() => {uni.reLaunch({url:'/pages/login/login',})}, timeout)}})}}}
</script><style lang="scss" scoped>.loginPage {width: 750rpx;height: 1624rpx;overflow: hidden;background-color: #fff;}.img {width: 750rpx;height: 1624rpx;}
</style>

uniapp小程序实现开屏页相关推荐

uniapp 小程序video列表页解决 ios 详情页返回列表页，列表页重载问题。
安卓手机不用考虑,但是在ios系统,会出现详情返回列表,列表页会重载0 首先官方推荐video 列表不超过3个video组件,再次我们用image代替video,点击是在切换出video插件. ` / ...
uniapp 小程序的几种跳转方式
** uniapp 小程序的几种跳转方式 ** navigateTo(保留当前页面,跳转到其他页面,使用navigateTo可以返回上一页) uni.navigateTo({url:'./urlPag ...
uniapp —— 小程序实现带参分享微信、朋友圈以及调试获取参数
uniapp -- 小程序实现带参分享微信.朋友圈以及调试获取参数零.起因以及分类小程序我们在开发微信小程序的过程中,经常需要实现分享给微信用户或者分享到微信朋友圈的功能,基本上我们会用到 on ...
uniapp小程序分享图片
uniapp小程序分享图片 uniapp小程序分享图片流程: ①.使用canvas绘图,将图片绘制到页面上,并生成一个本地路径 ②.保存图片至本地 ③.分享到朋友详细介绍: ①.使用canvas绘图 ...
uni-app 小程序使用腾讯地图完成搜索功能
前言使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下. 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用. 由于 ...
前端小白006：关于uniapp小程序背景音频和音频一些注意事项
前端小白006:关于uniapp小程序背景音频和音频一些注意事项全局唯一的背景音频权限申请背景音频和音频同时存在解决办法(个人推测) 个人结语全局唯一的背景音频背景音频好处就是可以后台播放 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
uniapp小程序迁移到TS
uniapp小程序迁移到TS 我一直在做的小程序就是山科小站也已经做了两年了,目前是用uniapp构建的,在这期间也重构好几次了,这次在鹅厂实习感觉受益良多,这又得来一次很大的重构,虽然小程序功能 ...
uni-app 小程序多图上传
uni-app 小程序多图上传: 官方提示说,App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API.所以跨端的写法就是循环调用本API 步骤: //1.首先通过 uni.c ...

uniapp小程序实现开屏页

uniapp小程序实现开屏页相关推荐

最新文章

热门文章