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

前两天遇到的问题,暂时没有解决,就搁置了。

不解决又难受,还好今天解决了,记录下

需求:

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

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

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

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

解决思路就是:每次点击的图片链接地址加上一个随机参数,强制让image组件去重新加载图片

我这里是vue3的写法,只是写法不同,实现效果一样的

bash 复制代码
			<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>
c 复制代码
	const data = ref({
		isStaticGirl: true,
		isStaticBoy: true,		
		boygif: '动态boy路径.gif',
		girlgif: '动态girl路径.gif'
	});
bash 复制代码
	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();
		}
	}

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

亲测有效~~~

相关推荐
!win !6 小时前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918419 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张10 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张21 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬1 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106321 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq1 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app
Qlittleboy1 天前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
写代码的jiang1 天前
打造精简高效的 uni-app 网络请求工具
uni-app
!win !1 天前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序