当前位置: 首页 > 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;他们当年学写程序的时候&…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...