当前位置: 首页 > 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();}}

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

亲测有效~~~

相关文章:

  • 【音视频-FFMPEG相关命令使用】
  • SELinux零知识学习二十五、SELinux策略语言之类型强制(10)
  • 微信小程序面试题【100道】
  • ORA-28003: password verification for the specified password failed,取消oracl密码复杂度
  • 【开源】基于JAVA的高校实验室管理系统
  • Web 自动化神器 TestCafe(三)—用例编写篇
  • 免费图书教材配套资料:Spark大数据技术与应用(第2版)
  • 基于opencv+ImageAI+tensorflow的智能动漫人物识别系统——深度学习算法应用(含python、JS、模型源码)+数据集(一)
  • 【ARM 嵌入式 编译 Makefile 系列 18 -- Makefile 中的 export 命令详细介绍】
  • C++学习之路(二)C++如何实现一个超简单的学生信息管理系统?C++示例和小项目实例
  • 4G5G智能执法记录仪在保险公司车辆保险远程定损中的应用
  • ubuntu22.04中ros2 安装rosbridge
  • JVM中判断对象是否需要回收的方法
  • STM32F10x进入低功耗模式
  • HuggingFace-利用BERT预训练模型实现中文情感分类(下游任务)
  • 【5+】跨webview多页面 触发事件(二)
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • java取消线程实例
  • Linux各目录及每个目录的详细介绍
  • React 快速上手 - 07 前端路由 react-router
  • Redis学习笔记 - pipline(流水线、管道)
  • springboot_database项目介绍
  • SQLServer之创建显式事务
  • 笨办法学C 练习34:动态数组
  • 对JS继承的一点思考
  • 反思总结然后整装待发
  • 基于HAProxy的高性能缓存服务器nuster
  • 每天10道Java面试题,跟我走,offer有!
  • 配置 PM2 实现代码自动发布
  • 树莓派 - 使用须知
  • 我的业余项目总结
  • 学习笔记TF060:图像语音结合,看图说话
  • 智能合约Solidity教程-事件和日志(一)
  • ​​​​​​​​​​​​​​汽车网络信息安全分析方法论
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • #define、const、typedef的差别
  • #pragma once与条件编译
  • (10)工业界推荐系统-小红书推荐场景及内部实践【排序模型的特征】
  • (3)Dubbo启动时qos-server can not bind localhost22222错误解决
  • (c语言)strcpy函数用法
  • (考研湖科大教书匠计算机网络)第一章概述-第五节1:计算机网络体系结构之分层思想和举例
  • (六)vue-router+UI组件库
  • (区间dp) (经典例题) 石子合并
  • (推荐)叮当——中文语音对话机器人
  • (转)visual stdio 书签功能介绍
  • .net core 6 redis操作类
  • .NET Standard、.NET Framework 、.NET Core三者的关系与区别?
  • .NET 反射 Reflect
  • .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
  • .NET 事件模型教程(二)
  • .net下的富文本编辑器FCKeditor的配置方法
  • ??javascript里的变量问题
  • @transactional 方法执行完再commit_当@Transactional遇到@CacheEvict,你的代码是不是有bug!...
  • [ C++ ] STL_list 使用及其模拟实现
  • [ 云计算 | Azure 实践 ] 在 Azure 门户中创建 VM 虚拟机并进行验证