当前位置: 首页 > news >正文

小程序使用uni.createAnimation只执行一次的问题

思路:
  1. 在页面创建的时候,创建一个临时动画对象
  2. 调用 step() 来表示一组动画完成
  3. 通过动画实例的export方法导出动画数据传递给组件的animation属性
  4. 还原动画
  5. 页面卸载的时候,清除动画数据
<template><view class="content"><view class="item" v-for="(item,index) in list" :key="item.id"><view class="left"> {{item.memo}} </view><view class="right" @click="praiseMe(index)"><image src="../../static/praise.png"></image><view class="font11">点赞</view><view :animation="animationDataArr[index]" class="praise-me animation-opacity"> +1 </view></view></view></view>
</template><script>
export default {data() {return {list:[{id:"001",memo:"苹果"},{id:"002",memo:"橘子"},{id:"003",memo:"草莓"},{id:"004",memo:"香蕉"}],animationData: {},animationDataArr: []};},onLoad() {// 1 在页面创建的时候,创建一个临时动画对象this.animation = uni.createAnimation();this.animationDataArr=Array(this.list.length).fill({});},onUnload() {// 5 页面卸载的时候,清除动画数据this.animationData = {};this.animationDataArr=Array(this.list.length).fill({});},methods: {// 实现点赞动画效果praiseMe(index) {// 2 调用 step() 来表示一组动画完成this.animation.translateY(-90).opacity(1).step({duration: 400});// 3 通过动画实例的export方法导出动画数据传递给组件的animation属性this.animationData = this.animation;this.animationDataArr[index] = this.animationData.export();// 4 还原动画setTimeout(()=> {this.animation.translateY(0).opacity(0).step({duration: 0});this.animationData = this.animation;this.animationDataArr[index] =  this.animationData.export();}, 600)},}
};
</script><style scoped>
.item{display: flex;align-items: center;text-align: center;border: 1px pink solid;margin-top:20rpx ;padding: 20rpx 0;
}
.item image{width: 80rpx;height: 80rpx;z-index: 10;
}
.item .left{flex: 1;
}
.item .right{width: 300rpx;border-left: 1px pink dashed;padding-top: 50rpx;
}.praise-me {font-size: 14px;color: #feab2a;
}.animation-opacity {font-weight: bold;opacity: 0;
}
</style>

 

相关文章:

小程序使用uni.createAnimation只执行一次的问题

思路&#xff1a; 在页面创建的时候&#xff0c;创建一个临时动画对象调用 step() 来表示一组动画完成通过动画实例的export方法导出动画数据传递给组件的animation属性还原动画页面卸载的时候&#xff0c;清除动画数据 <template><view class"content"&g…...

win10取消ie浏览器自动跳转edge浏览器

建议大家看完整篇文章再作操作 随着windows10 日渐更新&#xff0c;各种不同的操作&#xff0c;规避IE浏览器跳转Edge浏览器的问题 算了&#xff0c;找了台云机装的server 有自带的IE 1.&#xff08;失败&#xff09;思路 协助Edge浏览器 管理员身份打开 PowerShell 一般e…...

目录启示:使用 use 关键字为命名空间内的元素建立非限定名称

文章目录 参考环境三种名称非限定名称限定名称完全限定名称举个栗子 useuse 关键字use ... as .. 命名冲突真假美猴王两个世界 参考 项目描述搜索引擎Bing、GoogleAI 大模型文心一言、通义千问、讯飞星火认知大模型、ChatGPTPHP 官方PHP ManualPHP 官方language.namespaces.ra…...

Go语言介绍与安装

介绍与安装 本教程介绍了 Go&#xff0c;并讨论了选择 Go 相对于其他编程语言的优势。我们还将学习如何在Windows 中安装 Go。 介绍 Go也称为Golang&#xff0c;是由 Google 开发的一种开源、编译型、静态类型的编程语言。 Go创造背后的关键人物是Rob Pike、 Ken Thompson和…...

常用傅里叶变换表

傅里叶展开 傅里叶变换 傅里叶逆变换 时域信号 弧频域信号 线性变换 时域平移 频域平移 伸缩变换 微分性质 逆变换的微分性质 卷积定理 原函数变换结果 单位阶跃函数&#xff1a; 符号函数&#xff1a; 矩形函数&#xff1a; 辛格函数&#xff1a;...

生活中的视音频技术

生活中的视音频技术 平时我们打开电脑中自己存电影的目录的话&#xff0c;一般都会如下图所示&#xff0c;一大堆五花八门的电影。&#xff08;其实专业的影视爱好者一概会把影视文件分门别类的&#xff0c;但我比较懒&#xff0c;一股脑把电影放在了一起&#xff09; 因为下载…...

一种用于肽图分析的烷化剂,Desthiobiotin-Iodoacetamide

中文名&#xff1a;脱硫生物素-碘乙酰胺 英文名&#xff1a;Desthiobiotin-Iodoacetamide 化学式&#xff1a;C14H25IN4O3 分子量&#xff1a;424.28 外观&#xff1a;固体/粉末 规格&#xff1a;10mg、25mg、50mg等&#xff08;接受各种规格的定制服务&#xff0c;具体可…...

【(数据结构) —— 顺序表的应用-通讯录的实现】

&#xff08;数据结构&#xff09;—— 顺序表的应用-通讯录的实现 一.通讯录的功能介绍1.基于动态顺序表实现通讯录(1). 功能要求(2).重要思考 二. 通讯录的代码实现1.通讯录的底层结构(顺序表)(1)思路展示(2)底层代码实现(顺序表&#xff09; 2.通讯录上层代码实现(通讯录结构…...

macbook磁盘清理免费教程分享

笔记本电脑在是我们工作和生活中重要组成部分&#xff0c;磁盘清理是常有的事&#xff0c;而macbook作为其中的代表之一&#xff0c;也越来越受到人们的青睐。然而&#xff0c;如何进行macbook磁盘清理&#xff0c;也事许多人都会遇到的问题&#xff0c;特别是被提示“磁盘已满…...

cartographer_ros数据加载与处理

node_main.cc 坐标系的读取通过tf_bufferautonode类是cartographer_ros接收传感器数据&#xff0c;并传输到cartographer里&#xff0c;同时还会发布map&#xff0c;轨迹等node_options数据传给两个地方&#xff0c;一个是map_builder进行slam操作&#xff0c;一个是node做数据…...

设计模式-7种结构型模式

适配器模式&#xff1a; 将一个类的接口转换成用户希望得到的另一种接口。它使原本不相容的接口得以协同调用。 桥接模式&#xff1a; 将类的抽象部分和他的实现部分分离开来。是他们可以独立的变化。 它是用组合关系代替继承关系来实现&#xff0c;从而降低了抽象和实现这两…...

华为李鹏:加速5G商业正循环,拥抱更繁荣的5.5G(5G-A)

2023年10月10日&#xff0c;在华为主办的第十四届全球移动宽带论坛上&#xff0c;华为高级副总裁、运营商BG总裁李鹏面向来自全球的运营商和产业伙伴&#xff0c;提出抓住网络需求和趋势的力量——“面向后天的业务&#xff0c;积极规划明天的网络&#xff0c;加速5G商业正循环…...

Marin说PCB之CoilcraftBourns POC 电感的性能对比

十一小长假本来是一件美好事情。可是天有不测风云&#xff0c;小编我却有祸兮来了。本来是公司的硬件同事强哥要回以色列了&#xff0c;最近他们国家那边都在打仗&#xff0c;强哥本着舍身为国的精神回国抗战去了。小编我就想着在他回国之前搞了篮球比赛送别一下他呢&#xff0…...

聊聊Maven的依赖传递、依赖管理、依赖作用域

1. 依赖传递 在Maven中&#xff0c;依赖是会传递的&#xff0c;假如在业务项目中引入了spring-boot-starter-web依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>…...

centos6/7 SOCKS5 堆溢出漏洞修复(RPM方式)curl 8.4 CVE-2023-38545 CVE-2023-38546

引用 https://darkdark.top/update-curl.html centos6 rpm 升级包下载&#xff1a;https://download.csdn.net/download/sinat_24092079/88425840 yum update libcurl-8.4.0-1.el6.1.x86_64.rpm curl-8.4.0-1.el6.1.x86_64.rpmcentos7 rpm 升级包下载&#xff1a;https://down…...

C#,数值计算——数据建模Proposal的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public class Proposal { public Normaldev gau { get; set; } null; private double logstep { get; set; } public Proposal(int ranseed, double lstep) { this.gau…...

如何使用命令生成动态链接库.dll文件(保姆级教学)

如何使用命令生成动态链接库.dll文件 /*** file 如何使用命令生成动态链接库.dll文件* author jUicE_g2R(qq:3406291309)* * brief 教学演示* tool visual studio2022&#xff08;2019也适用&#xff09;* * copyright 2023.10* COPYR…...

Qt之模块介绍

Qt提供了很多功能模块&#xff0c;我们需要知道的是这些模块有些加入了标准库&#xff0c;有一些并没有加入到标准库。至于为什么没有加入到标准库通过chatgpt得到的答案如下&#xff1a; Qt 是一个强大的跨平台 C 框架&#xff0c;它包括了很多核心模块和功能&#xff0c;以支…...

Socks5代理和代理IP

在数字时代&#xff0c;网络工程师必须不断掌握新技术&#xff0c;以解决跨界电商、爬虫数据采集、出海业务扩展、网络安全保护以及游戏性能优化等各种技术挑战。本文将深入探讨Socks5代理和代理IP技术&#xff0c;它们在各个领域中的应用&#xff0c;如何为网络工程师提供了强…...

计算机指令、机器码

目录 背景 在软硬件接口中&#xff0c;CPU 帮我们做了什么事&#xff1f; 从编译到汇编&#xff0c;代码怎么变成机器码&#xff1f; 解析指令和机器码 总结延伸 背景 上大学的时候&#xff0c;我们系里教 C 语言程序设计的老师说&#xff0c;他们当年学写程序的时候&…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...