uniapp 背景动画 执行一次

本文介绍如何在uniapp中实现首页背景动画仅在应用启动时执行一次的效果。通过在模板中添加v-if控制动画图片的显示隐藏,并在登录页处理缓存,确保在用户跳转后不再重复播放动画。
摘要由CSDN通过智能技术生成

接着前两篇博客,做出来背景动画以后,客户要求进 app 时执

行一次动画,到退出app 之前,都不再执行动画。因为这个动画是在首页加的,所以就是刚进app 时在首页执行动画,跳转其他页面回来动画也不执行。

首页的     

template:

   在template 里  稍加改动     加了一个 v-if 用来控制动画图片的显示隐藏

<view v-if="haveimg">
<image :src="item.url" mode="" class="img" v-for="(item,i) in images" :key='i' :style="{left:item.left,width:item.width,height:item.height;
animationDuration:item.animationDuration,animationDelay:item.animationDelay}"></image>
</view>

js:

<script>
	export default {
		data() {
			return {
				haveimg: false,  //  让图片先隐藏
			}
		},
		onShow() {
                //  让图片的显示隐藏 与 缓存连在一起 
			this.haveimg = uni.getStorageSync('
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值