不用网站做cpa什么叫软文
前两天遇到的问题，暂时没有解决，就搁置了。
不解决又难受，还好今天解决了，记录下
需求：
两个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();}}
这样，每次点击图片时都会重新加载图片，从而实现每次点击都有动态效果的效果。
亲测有效~~~