Explication détaillée de l'exemple de changement du style de radio sélectionné dans l'applet WeChat

Cet article présente principalement les informations pertinentes sur l'explication détaillée du mini-programme WeChat Changement de style de sélection radio. Les amis dans le besoin peuvent se référer à

Explication détaillée du mini-programme WeChat Changement de style de sélection radio.

Cet article explique principalement comment changer de style en fonction de la sélection Radio dans l'applet WeChat. L'effet est le suivant :

Le principe est principalement de déterminer quel radio-groupe est sélectionné et de lui ajouter un style "actif".

Le code est le suivant :

<!--index.wxml--> 
<view class="container"> 
 <radio-group bindchange="radioCheckedChange"> 
  <view class="flex_box"> 
   <view class="flex_item"> 
    <label class="{{radioCheckVal==0?&#39;active&#39;:&#39;&#39;}}">人气 
     <radio value="0"  hidden="true"></radio> 
    </label> 
   </view> 
   <view class="flex_item"> 
    <label class="{{radioCheckVal==1?&#39;active&#39;:&#39;&#39;}}"> 销量 
     <radio value="1" hidden="true"></radio> 
    </label> 
   </view> 
   <view class="flex_item"> 
    <label class="{{radioCheckVal==2?&#39;active&#39;:&#39;&#39;}}"> 价格↑ 
     <radio value="2" hidden="true"></radio> 
    </label> 
   </view> 
  </view> 
 </radio-group> 
</view>

Comme vous pouvez le voir dans le code index.wxml, masquez d'abord le style original de la radio, et utilisez le clic sur l'étiquette pour déclencher la fonction d'écoute de l'événement radioCheckedChange.

/**index.wxss**/ 
radio-group{ 
 width: 100%; 
} 
.flex_box{ 
 display: flex; 
 width: 100%; 
 background: #eee; 
} 
.flex_item{ 
 flex: 1; 
 text-align: center; 
} 
.flex_item label{ 
 padding: 10px 0; 
 display: inline-block; 
 width: 50%; 
} 
.flex_item label.active{ 
 color: red; 
 border-bottom: 2px solid red; 
  
}

Dans index.wxss, utilisez la disposition flex pour les diviser également et définir le style "actif".

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  radioCheckVal:0 
 }, 
 radioCheckedChange:function(e){ 
  this.setData({ 
   radioCheckVal:e.detail.value 
  }) 
 } 
})

Dans index.js, définissez une variable radioCheckVal qui reçoit la valeur radio sélectionnée. Lorsque l'événement d'écoute est déclenché, enregistrez la valeur radio sélectionnée.

Le point le plus important est cette phrase :

<label class="{{radioCheckVal==0?&#39;active&#39;:&#39;&#39;}}">人气 
    <radio value="0"  hidden="true"></radio> 
   </label>

Utilisez une expression de jugement simple pour obtenir la radio sélectionnée dans les données, et jugez que lorsque == la valeur radio actuelle, c'est label Ajoute le style de sélection "actif".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!