バンイメージ映像ダイナミック切替ハイライト

バンイメージの画像は動的に切り替えられて強調表示され、アクティブな画像は動的変更に使用されます。

シーン:

2 つの写真のシーンは、実際にはラジオに相当します。単一選択の効果は、一方の写真が明るくなり、もう一方の写真が明るくならないことです。

2 つの画像の選択は、実際には 4 つの画像の切り替えになります。最初は1つ目と2つ目の方法を使っていましたが、読み込んだ白紙画像が切り替わるとあっという間に消えてしまうことが分かり、3つ目の方法を思いつきました。

解決する：

以下の 3 つの方法がありますが、最終的に私は 3 番目の方法を使用して切り替えました。これは単純かつ失礼です。

画像効果

 動的切り替え、つまりクリックして値を変更する方法は、次の 2 つの方法を使用して実現できますが、最初の方法の方が 2 番目の方法よりも使いやすいです。

方法 2 には、中央に空白の画像が読み込まれるという効果があります。

後で、方法 1 にも空の画像を読み込む効果があることがわかりました。これは錯覚であるか、方法 2 よりわずかに優れている可能性があります。

3 番目の方法は後で採用されます。

方法 1:

<van-image 
  :src="imageItem.isCheck=='Y'? require('@assets/images/test/'+imageItem.activePng)
                                :require('@assets/images/test/'+imageItem.noActivePng)"
  @click="confirmImg(imageItem)"
/>

方法 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);
    }
}

方法 3:

最初の 2 つは依然として読み込みの影響があり、読み込みは一瞬で完了しますが、ビジネス要件は比較的高いことがわかります。

最後に、2 つの写真を表示するか、この単純で大雑把な方法を使用するかを直接制御できることを思い出しました。この種の切り替えにより、エクスペリエンスがよりフレンドリーになり、ビジネス要件も満たされるようになります。

<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)"
/>