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

【bug】uniapp的image组件渲染gif图,只有第一次点击的时候有动效,需要每次点击都有gif效果,已解决

前两天遇到的问题,暂时没有解决,就搁置了。
不解决又难受,还好今天解决了,记录下

需求:
两个gif图,分别代表点击之后的男生和女生,并且有两个静态的男生和女生图片

当男生静态图被点击的时候切换男生的gif图,女生静态图被点击的时候切换女生的gif图

主要就是根据动态变量控制静态图和gif的图切换,但是来回多点击几次后发现,只有第一次从静态图切换到gif图的时候,才有gif的动态效果

然后才知道,原来在uni-app中使用image组件展示gif图片的时候,通常会遇到只有第一次点击时有动态效果,第二次点击不展示的问题。这是因为image组件默认会对同一个src地址的图片进行缓存,导致第二次点击时直接从缓存中读取,而不会重新加载图片。

解决思路就是:每次点击的图片链接地址加上一个随机参数,强制让image组件去重新加载图片
我这里是vue3的写法,只是写法不同,实现效果一样的

<view class="chose-sex-image"><view @click="choseSex('boy')" >			<image v-if="data.isStaticBoy" src="静态boy图片路径.png" style="width: 161rpx; height: 184rpx"></image><image v-else :src="data.boygif" style="width: 200rpx; height: 200rpx"></image></view><view @click.stop="choseSex('girl')" >				<image v-if="data.isStaticGirl" src="静态girl图片路径.png"style="width: 161rpx; height: 184rpx"></image><image v-else :src="data.girlgif" style="width: 200rpx; height: 200rpx"></image></view></view></view>
	const data = ref({isStaticGirl: true,isStaticBoy: true,		boygif: '动态boy路径.gif',girlgif: '动态girl路径.gif'});
	function choseSex(key) {if (key === "boy") {data.value.isStaticBoy = false;data.value.isStaticGirl = true;		data.value.boygif = '/static/images/动态boy路径.gif?' + new Date().getTime();} else {data.value.isStaticGirl = false;data.value.isStaticBoy = true;		data.value.girlgif = '/static/images/动态girl路径.gif?' + new Date().getTime();}}

这样,每次点击图片时都会重新加载图片,从而实现每次点击都有动态效果的效果。

亲测有效~~~

相关文章:

【bug】uniapp的image组件渲染gif图,只有第一次点击的时候有动效,需要每次点击都有gif效果,已解决

前两天遇到的问题&#xff0c;暂时没有解决&#xff0c;就搁置了。 不解决又难受&#xff0c;还好今天解决了&#xff0c;记录下 需求&#xff1a; 两个gif图&#xff0c;分别代表点击之后的男生和女生&#xff0c;并且有两个静态的男生和女生图片 当男生静态图被点击的时候切…...

ubuntu编译sqlite3并使用

SQLite3是一种轻量级的关系型数据库管理系统&#xff0c;它是在C语言基础上实现的。SQLite3具有许多优点&#xff0c;例如&#xff1a; 1.灵活&#xff1a;它可以在多种操作系统上运行&#xff0c;并且可以将多个数据库文件合并成一个文件。 2.易于使用&#xff1a;SQLite3使用…...

【OpenCV+OCR】计算机视觉:识别图像验证码中指定颜色文字

文章目录 1. 写在前面2. 读取验证码图像3. 生成颜色掩码4. 生成黑白结果图5. OCR文字识别6. 测试结果 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【…...

【ROS 2 进阶-MoveIt!】MoveIt!中的关键节点

所有内容请查看&#xff1a;博客学习目录_Howe_xixi的博客-CSDN博客 原文档链接&#xff1a;Docs...

-bash: jps: command not found

背景 服务器的jdk通过yum 安装的&#xff0c;要用jps查询pid&#xff0c;提示找不到命令 yum install -y java-1.8.0-openjdk.x86_64 一、jps命令无法找到 [devhgh-tob-hsbc-dev-003 ~]$ jps -bash: jps: command not found 二、检查基础Java环境 [devhgh-tob-hsbc-dev-003 ~]…...

[CLickhouse] 学习小计

1.建表 正常按照如下语句进行建表&#xff0c;但会报错说缺少ORDER BY 或 PRIMARY KEY CREATE TABLE omds.a (x String COMMENT ,y String COMMENT ,z String ) ENGINE MergeTree(); 若我们仅需建一个没有主键的表&#xff0c;直接使用如下建表语句即可&#xff1a; CREATE…...

一款非常优秀的项目管理工具:进度猫(推荐)

在项目管理中&#xff0c;一个好的工具可以极大地提高效率。 进度猫是一款非常优秀的项目管理工具。它具有非常强大的功能&#xff0c;可以帮助团队更好地管理项目进度。 通过可视化的方式&#xff0c;将项目进度、任务分配、需求变更等全面呈现给团队成员&#xff0c;让团队…...

Bert学习笔记(简单入门版)

目 录 一、基础架构 二、输入部分 三、预训练&#xff1a;MLMNSP 3.1 MLM&#xff1a;掩码语言模型 3.1.1 mask模型缺点 3.1.2 mask的概率问题 3.1.3 mask代码实践 3.2 NSP 四、如何微调Bert 五、如何提升BERT下游任务表现 5.1 一般做法 5.2 如何在相同领域数据中进…...

信号功率放大器的工作原理和特点是什么

信号功率放大器是一种电子设备&#xff0c;用于将输入信号的功率进行放大&#xff0c;以达到所需的输出功率水平。它在各个领域中都有广泛的应用&#xff0c;包括音频放大器、射频放大器、激光功率放大器等。下面将详细介绍信号功率放大器的工作原理和特点。 工作原理&#xff…...

基于go标准分层架构项目设计实现

基于go标准分层架构项目设计实现 缘起 个人博客网址 最近主要看了两方面知识&#xff0c;一方面是技术相关的&#xff0c;如何设计一个比较好的后端架构项目代码&#xff1b;一方面是非技术相关的&#xff0c;如何写一篇好的技术文章&#xff0c;能够让他人读懂并有收获。因…...

原理Redis-IntSet

IntSet IntSet是Redis中set集合的一种实现方式&#xff0c;基于整数数组来实现&#xff0c;并且具备长度可变、有序等特征。 结构如下&#xff1a; typedef struct intset {uint32_t encoding; /* 编码方式&#xff0c;支持存放16位、32位、64位整数*/uint32_t length; /* 元素…...

逸学java【初级菜鸟篇】9.3 Stream流

hi&#xff0c;我是逸尘&#xff0c;一起学java吧 得益于Lambda所带来的函数式编程&#xff0c;引入了一个全新的Stream流概念&#xff08;就是都基本使用lambda的形式&#xff09;。 流处理 我们首先理解什么是流处理&#xff0c;它类似于sql语句&#xff0c;可以执行非常复…...

html页面直接使用elementui Plus时间线 + vue3

直接上效果图 案例源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"../js/vue3.3.8/vue.global.js"></script><link rel"styles…...

信息压缩模型在自然语言处理中的应用和探讨

信息压缩模型在自然语言处理中的应用和探讨 摘要:正文:结论:附录:摘要: 随着人工智能和深度学习的发展,自然语言处理(NLP)在信息处理中的角色变得越来越重要。然而,海量的自然语言数据为信息处理带来了挑战——更多的信息通常意味着更高的处理成本,并可能导致效率降低。为…...

新版mmdetection3d将3D bbox绘制到图像

环境信息 使用 python mmdet3d/utils/collect_env.py收集环境信息 sys.platform: linux Python: 3.7.12 | packaged by conda-forge | (default, Oct 26 2021, 06:08:21) [GCC 9.4.0] CUDA available: True numpy_random_seed: 2147483648 GPU 0,1: NVIDIA GeForce RTX 3090 …...

合伙人注册即得/创业平台扶持!

问心一语持续体验中~ 与公司签订线下&#xff08;线上&#xff09;纸质合伙人代理合同&#xff0c;具备法律效力。 一级直推、非一级直推注册即得奖励。(消耗完毕被邀请用户赠送的AI免费使用条数) 即&#xff1a;邀请1人注册即得并消耗&#xff01;只需注册无需充值&#xff…...

02_使用API_String

StringBuilder StringBuilder 代表可变字符串对象&#xff0c;相对于是一个容器&#xff0c;它里面装的字符串是可以改变的&#xff0c;就是用来操作字符串的好处&#xff1a;StringBuilder 比 String 更适合做字符串的修改操作&#xff0c;效率会更高&#xff0c;代码也会更简…...

Spring IOC/DI和MVC及若依对应介绍

文章目录 一、Spring IOC、DI注解1.介绍2.使用 二、Spring MVC注解1.介绍2.使用 一、Spring IOC、DI注解 1.介绍 什么是Spring IOC/DI&#xff1f; IOC(Inversion of Control&#xff1a;控制反转)是面向对象编程中的一种设计原则。其中最常见的方式叫做依赖注入&#xff08;…...

python的多层嵌套循环时,break可以退出多层循环吗?

在Python中&#xff0c;break 语句只能退出当前所在的循环&#xff0c;无法直接退出多层嵌套的循环。但是&#xff0c;你可以通过使用一个标志变量或者通过使用异常来模拟退出多层循环的效果。 使用标志变量&#xff1a; flag False for i in range(5):for j in range(5):if…...

链表OJ--上

文章目录 前言一、反转链表二、移除链表元素三、链表中倒数第K个结点四、相交链表五、链表的中间结点 前言 一、反转链表 力扣206&#xff1a;反转链表- - -点击此处传送 思路图&#xff1a; 方法一&#xff1a;改变指向 方法二&#xff1a; 代码&#xff1a; //方法一 /…...

css收集

文章目录自动处理所有间距水平垂直居中多行文本截断,超出省略自动均衡折行竖排文字文字融合效果:active 元素激活状态:first-child 第一个子元素:nth-child() 选择指定的子元素:not() 反向选择器media 响应式媒体查询supports 特性检测查询var() css自定义变量使用calc() 动态值…...

从GroundingDino推理到Open-GroundingDino训练:我的环境配置与验证集精度为0的踩坑实录

从推理到训练&#xff1a;Open-GroundingDino实战中的环境配置与验证集精度问题深度解析 当我在深夜第三次尝试启动Open-GroundingDino训练脚本时&#xff0c;终端上闪烁的"validation AP: 0.000"让我陷入了沉思。这不是一个简单的环境配置问题&#xff0c;而是一系…...

【数据治理核心宝典】必备的12个高频专业术语详解(建议收藏)

导读: 在企业数字化转型狂飙突进的今天,“数据治理”已经从一句口号变成了落地的刚需。然而,对于许多刚接触数据领域的开发工程师、产品经理或业务人员来说,诸如“元数据”、“数据元”、“主数据”等概念常常让人一头雾水。 本文将用通俗易懂的语言,结合实际业务场景,为…...

【航海软件】海洋船舶可视化仿真神器来了!直接带领船舶仿真进入数字孪生时代!

各位航友好&#xff01;我是你们的老朋友&#xff5e; 现在海洋船舶行业太有必要做数字化转型了&#xff0c;今天要给大家安利一款真正改写行业规则的"终极武器"。——CIMPro孪大师海洋船舶仿真数字孪生平台&#xff01; 先来看看咱们航友们正在彼此经历的这些&…...

为移动应用后端搭建一个具备容灾能力的大模型服务网关

为移动应用后端搭建一个具备容灾能力的大模型服务网关 1. 移动应用后端的AI集成挑战 现代移动应用后端常面临大模型服务集成时的三个核心问题&#xff1a;供应商锁定风险、突发流量下的稳定性保障以及多团队协作时的密钥管理。当应用日活达到十万量级时&#xff0c;直接对接单…...

Spring AI 2.0 开发Java Agent智能体 - 新建 HelloWorld 项目

大家好&#xff0c;我是小锋老师&#xff0c;最近更新《2027版本 Spring AI 2.0 开发Java Agent智能体 视频教程》专辑&#xff0c;感谢大家支持。 本课程主要介绍和讲解Spring AI 2.0简介&#xff0c;Spring AI 2.0 HelloWorld搭建&#xff0c;Advisors — 拦截器模式增强AI能…...

AI代码生成工具genaicode:基于项目上下文的智能编程引擎实战指南

1. 项目概述&#xff1a;一个真正能理解你代码库的AI编程伙伴如果你和我一样&#xff0c;每天都要在编辑器、终端和浏览器之间来回切换&#xff0c;一边查文档一边写代码&#xff0c;那今天要聊的这个工具可能会让你眼前一亮。它不是另一个简单的代码补全插件&#xff0c;也不是…...

Cesium三维管网可视化实战:手把手教你封装可显示水位的垂直与水平管道实体

Cesium三维管网可视化实战&#xff1a;从零封装动态水位管道组件 城市地下管网如同人体的血管系统&#xff0c;错综复杂却又至关重要。传统二维平面图难以直观展示管道空间关系&#xff0c;更无法呈现水位变化等动态信息。Cesium作为领先的地理空间可视化引擎&#xff0c;为这类…...

别再瞎忙了!用KISS复盘法给你的个人年度计划做个‘体检’(附Notion模板)

用KISS复盘法重塑你的年度计划&#xff1a;一份Notion实战指南 每到年末&#xff0c;我们总会在笔记本或电子文档里写下雄心勃勃的新年计划&#xff0c;但统计显示92%的人会在第一季度结束前放弃这些目标。问题不在于缺乏决心&#xff0c;而在于缺少一套持续迭代的自我管理系统…...

在Node.js服务中集成Taotoken实现稳定的大模型调用

在Node.js服务中集成Taotoken实现稳定的大模型调用 1. 技术选型与准备 对于需要构建AI功能后端服务的开发者而言&#xff0c;选择合适的大模型接入方案直接影响服务稳定性与维护成本。Taotoken平台通过聚合多模型供应商并提供统一API接口&#xff0c;简化了技术栈复杂度。在N…...