Interprétation et analyse des composants du mini-programme WeChat : introduction aux options des cases à cocher-Développement de mini-programmes-php.cn

Interprétation et analyse des composants du mini-programme WeChat : introduction aux options des cases à cocher

高洛峰

Libérer： 2017-03-19 17:32:04

original

2241 Les gens l'ont consulté

option de case à cocherDescription du composant :

Checkbox est un composant du composant de formulaire du mini programme. Sa fonction est de guider les utilisateurs dans leurs choix dans le formulaire.

Pour utiliser le composant checkbox, vous devez également utiliser la balise checkbox-group en plus de toutes les balises checkbox du même groupe.

La fonction de la balise checkbox-group est de lier l'événement onchange à la balise checkbox et de guider l'utilisateur lorsqu'il fait un choix.

Une seule balise de case à cocher ne déclenchera pas l'événement onchange, elle ne sera déclenchée que si elle est liée au groupe de cases à cocher.

case à cocherComposantL'exemple de code s'exécute comme suit :

Ce qui suit est le code WXML :

<view>
    <checkbox-group class="checkbox-group" bindchange="changed">
        <label class="items" wx:for="{{item}}">
            <checkbox value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}"/>
            {{item.name}}
        </label>
    </checkbox-group>
</view>

Copier après la connexion

Ce qui suit est le code JS :

Page({
  data:{
    item: [
      {&#39;name&#39;: &#39;俄罗斯&#39;, &#39;value&#39;: &#39;RS&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;美国&#39;, &#39;value&#39;: &#39;US&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;中国&#39;, &#39;value&#39;: &#39;CN&#39;, &#39;disabled&#39;: false, &#39;checked&#39;: true},
      {&#39;name&#39;: &#39;英国&#39;, &#39;value&#39;: &#39;UK&#39;, &#39;disabled&#39;: false},
      {&#39;name&#39;: &#39;日本&#39;, &#39;value&#39;: &#39;JP&#39;, &#39;disabled&#39;: true}
    ]
  },
  changed: function(e) {
    console.info(&#39;你选择了&#39; + e.detail.value);
  }
})

Copier après la connexion

Voici le code WXSS :

.items {
    display: block;
    margin: 30rpx;
}

Copier après la connexion

case à cocher plusieurs options Attributs principaux :

checkbox-group

属性名称	数据类型	描述
bindchange	EventHandle	中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

Description tr> bindchange EventHandle < ;checkbox-group/ >Lorsque l'élément sélectionné change, l'événement de changement est déclenché, détail = {value:[tableau de valeurs de la case à cocher sélectionnée]}

属性名称	数据类型	描述	默认值
value	String	标识，选中时触发的 change 事件，并携带的value值
checked	Boolean	是否使默认被选中	false
disabled	Boolean	是否使被禁用	false

case à cocher

Nom de l'attribut	Type de données	Description	Valeur par défaut
valeur	String	identifiant, déclenche l'événement de changement de valeur de
coché	Booléen td>	Si est sélectionné par défaut	false
désactivé	Booléen	Si >	faux

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!