Maison  >  Article  >  Applet WeChat  >  Interprétation et analyse des composants de l'applet WeChat : sélecteur de commutateur

Interprétation et analyse des composants de l'applet WeChat : sélecteur de commutateur

巴扎黑
巴扎黑original
2017-03-29 09:14:572192parcourir

sélecteur de commutateurDescription du composant :

interrupteur, sélecteur d'interrupteur. Vous pouvez seulement choisir ou ne pas choisir. Ce type appartient au contrôle de formulaire ou au contrôle de condition de requête.

sélecteur de commutateurL'exemple de code s'exécute comme suit :

Voici le code WXML :

[XML] Affichage en texte brut Copier le code

<view class="section section">
  <text class="title">switch style</text>
  <view class="body-view">
    <switch checked bindchange="switch1Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">switch style</text>
  <view class="body-view">
    <switch bindchange="switch2Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">checkbox style</text>
  <view class="body-view">
    <switch type="checkbox" checked bindchange="switch1Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">checkbox style</text>
  <view class="body-view">
    <switch type="checkbox" bindchange="switch2Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">西游记里都有谁</text>
  <view class="body-view">
    <switch type="checkbox" checked bindchange="switch2Change"/><text class="title">牛魔王</text>
  </view>
  <view class="body-view">
    <switch type="checkbox" checked bindchange="switch2Change"/><text class="title">孙悟空</text>
  </view>
   <view class="body-view">
    <switch type="checkbox" checked bindchange="switch2Change"/><text class="title">猪八戒</text>
  </view>
  <view class="body-view">
    <switch type="checkbox"  bindchange="switch2Change"/><text class="title">旗木卡卡西</text>
  </view>
</view>

Voici le code JS :

[JavaScript] Affichage en texte brut Copier le code

Page({
  switch1Change: function (e){
    console.log(&#39;switch1 发生 change 事件,携带值为&#39;, e.detail.value)
  },
  switch2Change: function (e){
    console.log(&#39;switch2 发生 change 事件,携带值为&#39;, e.detail.value)
  }
})

Voici le code WXSS :

[CSS] Vue en texte brut Copier le code

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}



sélecteur de commutateur propriétés principales

Nom de l'attribut

属性名

类型

默认值

说明

checked Boolean false 是否选中
type String switch 样式,有效值:switch, checkbox
bindchange EventHandle
checked改变时触发change事件,event.detail={ value:checked}

Type

td>

Valeur par défaut

Description

coché Booléen false Si coché
type String switch style, valeurs valides : switch , case à cocher
bindchange EventHandle L'événement de changement est déclenché lorsque les modifications sont vérifiées , event.detail= { value:checked}
Expérience personnelle : convient pour sélectionner vrai et faux pour un seul élément, non Il est recommandé d'utiliser le style de case à cocher

Ceci convient pour sélectionner vrai et faux. pour un seul élément, il n’est pas recommandé d’utiliser le style case à cocher. Parce que le contrôle de case à cocher existe déjà. De plus, lorsque vous utilisez le style case à cocher, il n'y a pas de texte suivant. Le texte sur l'image est reconstitué par moi et aucun événement de contrôle n'a été ajouté (il ne doit pas être utilisé de cette façon)

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn