当前位置: 首页 > 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; //方法一 /…...

Python与scikit-learn构建自动化机器学习流水线实战

1. 项目概述&#xff1a;用Python和scikit-learn构建自动化机器学习流水线在数据科学项目中&#xff0c;最耗时的往往不是模型训练本身&#xff0c;而是数据预处理、特征工程和模型评估这些重复性工作。三年前我接手一个金融风控项目时&#xff0c;曾因为手动处理这些环节浪费了…...

2026年华为云怎么安装OpenClaw/Hermes Agent?百炼token Plan配置解析全攻略

2026年华为云怎么安装OpenClaw/Hermes Agent&#xff1f;百炼token Plan配置解析全攻略 。OpenClaw和Hermes Agent是什么&#xff1f;OpenClaw和Hermes Agent怎么部署&#xff1f;如何部署OpenClaw/Hermes Agent&#xff1f;2026年还在为部署OpenClaw和Hermes Agent到处找教程踩…...

如何高效批量下载无水印抖音视频:终极解决方案指南

如何高效批量下载无水印抖音视频&#xff1a;终极解决方案指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support.…...

Vin象棋:当深度学习遇见千年棋道,智能连线如何重塑中国象棋体验

Vin象棋&#xff1a;当深度学习遇见千年棋道&#xff0c;智能连线如何重塑中国象棋体验 【免费下载链接】VinXiangQi Xiangqi syncing tool based on Yolov5 / 基于Yolov5的中国象棋连线工具 项目地址: https://gitcode.com/gh_mirrors/vi/VinXiangQi 想象一下&#xff…...

VOFA+上位机实战:用STM32F407的USB虚拟串口,实现高速数据采集与可视化

VOFA与STM32F407的USB虚拟串口实战&#xff1a;构建高速数据采集系统 在工业自动化和物联网设备开发中&#xff0c;数据采集与实时可视化一直是核心需求。传统UART串口通信受限于115200bps的速率瓶颈&#xff0c;当面对多通道传感器数据采集时往往力不从心。STM32F407系列内置的…...

Windows热键侦探:3分钟快速定位快捷键冲突的终极指南

Windows热键侦探&#xff1a;3分钟快速定位快捷键冲突的终极指南 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你是否曾遇…...

从SOC到VSOC:手把手教你规划车企网络安全运营中心的“车规级”技术栈

从SOC到VSOC&#xff1a;构建车企网络安全运营中心的实战技术栈 当一辆智能汽车以每小时120公里的速度行驶时&#xff0c;它的ECU每秒要处理超过2000个信号。这些数据不仅关乎驾驶体验&#xff0c;更隐藏着黑客可能利用的攻击面。传统SOC&#xff08;安全运营中心&#xff09;的…...

HS2-HF_Patch:突破语言壁垒的《Honey Select 2》一站式增强解决方案

HS2-HF_Patch&#xff1a;突破语言壁垒的《Honey Select 2》一站式增强解决方案 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 面对《Honey Select 2》日文界面…...

如何彻底解决Dell G15散热问题:tcc-g15开源控制中心完整指南

如何彻底解决Dell G15散热问题&#xff1a;tcc-g15开源控制中心完整指南 【免费下载链接】tcc-g15 Thermal Control Center for Dell G15 - open source alternative to AWCC 项目地址: https://gitcode.com/gh_mirrors/tc/tcc-g15 想象一下&#xff0c;你正在用Dell G1…...

专业窗口调整工具:重新掌控你的Windows桌面布局

专业窗口调整工具&#xff1a;重新掌控你的Windows桌面布局 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer WindowResizer是一款基于C和MFC开发的免费开源工具&#xff0c;专门用于…...