Maison > Applet WeChat > Développement de mini-programmes > Composant d'applet WeChat : interprétation et analyse du sélecteur de commutateur

Composant d'applet WeChat : interprétation et analyse du sélecteur de commutateur

高洛峰
Libérer: 2017-03-31 13:41:22
original
2548 Les gens l'ont consulté

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 commutateurExemple d'effet d'exécution de code Comme suit :
微信小程序组件:switch 开关选择器解读和分析

Voici le code WXML :

<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>
Copier après la connexion



Voici le code JS :

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)
  }
})
Copier après la connexion



Voici le code WXSS :

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}
Copier après la connexion


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

Valeur par défaut

Description

coché Booléen faux Si coché
type String style de commutateur , valide valeur : switch, case à cocher
bindchange EventHandle L'événement de changement est déclenché une fois coché, event detail={ value:checked>
Expérience personnelle : convient à la sélection true et false pour un seul élément , il n'est pas recommandé d'utiliser le style de case à cocher

Ceci convient pour sélectionner true et false dans 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal