WeChat アプレット開発チュートリアル: 三項演算子はクラス属性を動的に追加し、ユーザーの選択に従って CSS スタイルを変更します

今回は実際の事例を交えて解説していきます。

次の WeChat アプレット コードがあります。

<view class="all" data-index="{
   
   {index}}" bindtap="showAll">{
   
   {item.showAll ? '▲收起内容▲' : '▼点击查看所有专业▼'}}</view>

「▲コンテンツを折りたたむ▲」表示時の背景色を変更したい場合は、CSSクラスを動的に追加してスタイルを制御することができます。以下は、WXML で条件付きレンダリングを使用してクラスを動的に追加し、WXSS でこのクラスのスタイルを定義する方法を示すサンプル コードです。

まず、WXSS (またはスタイル ファイル) で 2 つのクラスを定義します。1 つは通常の状態用、もう 1 つは背景色を変更する状態用です。

/* wxss文件 */
.all {
  /* 其他样式 */
}

.all-collapse {
  background-color: #yourColor; /* 替换成你想要的颜色 */
  /* 其他想要修改的样式 */
}

次に、WXML の三項演算子を使用してクラスを動的に追加します。

<!-- wxml文件 -->
<view class="all {
   
   {item.showAll ? 'all-collapse' : ''}}" data-index="{
   
   {index}}" bindtap="showAll">
  {
   
   {item.showAll ? '▲收起内容▲' : '▼点击查看所有专业▼'}}
</view>

この例では、item.showAll が true の場合、all-collapse クラスが < i=4> 要素により、背景色が変更されます。 が の場合、 クラスのみが適用されますが、 クラスは追加されていません。 <view>item.showAllfalseallall-collapse

必ず WXSS ファイルで .all-collapse クラスを定義し、 #yourColor を必要な色の値に置き換えてください。このように、クリック イベントがトリガーされて item.showAll の値が変化すると、それに応じてビューの背景色も変化します。