admin 管理员组

文章数量: 888299

uniapp 背景动画 执行一次

接着前两篇博客，做出来背景动画以后，客户要求进 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.setStorageSync('haveAninmation', false);},methods: {// 背景图片动画numimg() {var url = this.images[Math.floor(Math.random() * this.images.length)];console.log(url);for (var i = 0; i < this.images.length; i++) {this.images[i].left = randomNum(5, 90).toFixed(0) + '%';this.images[i].width = randomNum(56,75).toFixed(0)+'upx';this.images[i].height = this.images[i].width;this.images[i].animationDuration = randomNum(5,8).toFixed(1)+'s';this.images[i].animationDelay = randomNum(0,4).toFixed(1)+'s';}},}}
</script>

css：

//  客户要求说就掉1次   所以animation-iteration-count 次数 是 1  不是 infinite（无限次）.img {position: absolute;top: -80upx;z-index: 99;animation: snow   1s  linear  1 ;}

要在 登录页 也要加关于缓存的东西

点击登录按钮的时候，在登录的方法里  要加上：

login() {uni.setStorageSync('haveAninmation', true);
}

本文标签： uniapp背景动画 执行一次

版权声明：本文标题：uniapp背景动画 执行一次 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1693584073h230655.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。