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

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('switch1 发生 change 事件，携带值为', e.detail.value)
  },
  switch2Change: function (e){
    console.log('switch2 发生 change 事件，携带值为', 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!