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 背景动画执行一次相关推荐

css 页面从左侧向右滑入，动画只执行一次
简单实现了页面进入时的动画: (1)从左侧滑入: (2)只执行一次. <template><div class="big_screen_contant">& ...
vue animate bounceInRight 只执行一遍
touchMove 中左滑添加bounceInRight ,动画只执行一遍,或者只有某个有动画解决:第一步:数据出现比动画要慢在touchEnd中增加延迟,把类名置位空第二步:把增加bounc ...
python 每分钟运行一次_python 每60秒执行一次
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 我想在python上每60秒执行一次函数我怎样才能异步做到这一点? impor ...
php 一秒操作一次_php守护进程加linux命令nohup实现任务每秒执行一次
Unix中 nohup 命令功能就是不挂断地运行命令,同时 nohup 把程序的所有输出到放到当前目录 nohup.out 文件中,如果文件不可写,则放到 /nohup.out 文件中.那么有了这个命 ...
Android实现仿QQ登录界面背景动画效果
登录QQ的时候,我们会看到在登录界面的背景不是静态的,而是一段动画效果,刚开始觉得蛮好奇的,现在我们也来实现一下这种效果,实现起来还是挺简单的. 实现步骤: 1.自定义CustomVideoView类 ...
开启Thread线程只执行一次
代码如下 private static Thread mTaskThread = new Thread(new Runnable() {@Overridepublic void run() {coun ...
怎样才能让一段代码每隔一段时间执行一次？
实现的方法有两种不过都是继承于线程类来实现的. 1. public void run() {while (true) {try {sleep(10000L); //间隔10s执行一次! }catch ...
spring怎么设置定时任务为每天凌晨2点执行和每小时执行一次？(亲测)
每天凌晨2点 0 0 2 * * ?和每天隔一小时 0 * */1 * * ? 例1:每隔5秒执行一次:*/5 * * * * ? 例2:每隔5分执行一次:0 */5 * * * ? 在26分.29 ...
Go的sync.Once(三)：once.do(函数名) 函数只执行一次
Once once.do(函数名) 函数只执行一次!执行一次后,其他协程不执行了 // 用once可以保证上面的oncebody被执行一次 package mainimport ("fmt ...

uniapp 背景动画执行一次

uniapp 背景动画执行一次相关推荐

最新文章

热门文章

uniapp 背景动画 执行一次

uniapp 背景动画 执行一次相关推荐

最新文章

热门文章

uniapp 背景动画执行一次

uniapp 背景动画执行一次相关推荐