The van-image picture is dynamically switched and highlighted, and the active picture is used for dynamic changes
Scenes:
The scene of the two pictures is actually equivalent to a radio. The effect of single selection is that one picture is brightened and the other one is not.
The selection of the two pictures is actually the switching of the four pictures. At the beginning, I used the first and second methods, and found that a loaded blank image would disappear in a flash after switching, and then I thought of the third method.
solve:
There are three methods below. In the end, I used the third method to switch, which is simple and rude.
picture effect
Dynamic switching, the click method to modify the value, can be achieved by using the following two methods, but the first method is more friendly than the second method,
Method 2 will have the effect of loading a blank image in the middle.
Later, I found that method 1 still has the effect of loading a blank image, which may be an illusion or may be slightly better than method 2.
The third method is adopted later.
method one:
<van-image
:src="imageItem.isCheck=='Y'? require('@assets/images/test/'+imageItem.activePng)
:require('@assets/images/test/'+imageItem.noActivePng)"
@click="confirmImg(imageItem)"
/>Method 2:
<van-image
:src="getImgUrl(imageItem)"
@click="confirmImg(imageItem)"
/>
getImgUrl(imageItem){
if(imageItem.isCheck=='Y'){
return require('@assets/images/test/'+imageItem.activePng);
}else{
return require('@assets/images/test/'+imageItem.noActivePng);
}
}Method three:
It is found that the first two will still have an effect of loading, which passes in a flash, but the business requirements are relatively high.
Finally, I remembered that I can directly control whether to display two pictures, or use this simple and crude method. This kind of switching will make the experience more friendly and meet the business requirements.
<van-image
v-show="imageItem.isCheck=='Y'"
:src="require('@assets/images/test/'+imageItem.activePng)"
@click="confirmImg(imageItem)"
/>
<van-image
v-show="imageItem.isCheck=='N'"
:src="require('@assets/images/test/'+imageItem.noActivePng)"
@click="confirmImg(imageItem)"
/>