uniapp小程序实现开屏页-Toy模板网

这篇具有很好参考价值的文章主要介绍了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是否失效的问题

代码如下文章来源地址https://www.toymoban.com/news/detail-553475.html

<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 url
					if (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小程序实现开屏页的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！