网站建设的公司开发方案,焦作建设银行门户网站,网站内部优化,下载站源码cms前两天遇到的问题#xff0c;暂时没有解决#xff0c;就搁置了。 不解决又难受#xff0c;还好今天解决了#xff0c;记录下
需求#xff1a; 两个gif图#xff0c;分别代表点击之后的男生和女生#xff0c;并且有两个静态的男生和女生图片
当男生静态图被点击的时候切…前两天遇到的问题暂时没有解决就搁置了。 不解决又难受还好今天解决了记录下
需求 两个gif图分别代表点击之后的男生和女生并且有两个静态的男生和女生图片
当男生静态图被点击的时候切换男生的gif图女生静态图被点击的时候切换女生的gif图
主要就是根据动态变量控制静态图和gif的图切换但是来回多点击几次后发现只有第一次从静态图切换到gif图的时候才有gif的动态效果
然后才知道原来在uni-app中使用image组件展示gif图片的时候通常会遇到只有第一次点击时有动态效果第二次点击不展示的问题。这是因为image组件默认会对同一个src地址的图片进行缓存导致第二次点击时直接从缓存中读取而不会重新加载图片。
解决思路就是每次点击的图片链接地址加上一个随机参数强制让image组件去重新加载图片 我这里是vue3的写法只是写法不同实现效果一样的
view classchose-sex-imageview clickchoseSex(boy) image v-ifdata.isStaticBoy src静态boy图片路径.png stylewidth: 161rpx; height: 184rpx/imageimage v-else :srcdata.boygif stylewidth: 200rpx; height: 200rpx/image/viewview click.stopchoseSex(girl) image v-ifdata.isStaticGirl src静态girl图片路径.pngstylewidth: 161rpx; height: 184rpx/imageimage v-else :srcdata.girlgif stylewidth: 200rpx; height: 200rpx/image/view/view/viewconst 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();}}这样每次点击图片时都会重新加载图片从而实现每次点击都有动态效果的效果。
亲测有效~~~
