uniapp 背景动画执行一次

最新推荐文章于 2025-10-27 17:45:51 发布

原创

最新推荐文章于 2025-10-27 17:45:51 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp 背景动画

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

接着前两篇博客，做出来背景动画以后，客户要求进 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('haveAninmation');
			this.numimg();
		},
		onHide() {
                // 随便设一个缓存  
			uni.setStorageSy