Interpretation und Analyse der Komponenten des WeChat-Miniprogramms: Einführung in die Kontrollkästchenoptionen-Mini-Programmentwicklung-php.cn

Interpretation und Analyse der Komponenten des WeChat-Miniprogramms: Einführung in die Kontrollkästchenoptionen

高洛峰

Freigeben： 2017-03-19 17:32:04

Original

2365 Leute haben es durchsucht

Kontrollkästchen-OptionKomponentenbeschreibung:

Checkbox ist eine Komponente in der Miniprogramm-Formularkomponente. Ihre Funktion besteht darin, Benutzer bei der Auswahl im Formular anzuleiten.

Um die Checkbox-Komponente zu verwenden, müssen Sie zusätzlich zu allen Checkbox-Tags in derselben Gruppe auch das Tag checkbox-group verwenden.

Die Funktion des checkbox-group-Tags besteht darin, das onchange-Ereignis an das checkbox-Tag zu binden und den Benutzer anzuleiten, wenn er eine Auswahl trifft.

Ein einzelnes Checkbox-Tag löst das onchange-Ereignis nicht aus, es wird nur ausgelöst, wenn es an die Checkbox-Gruppe gebunden ist.

Kontrollkästchen KontrollkästchenKomponenteDer Beispielcode läuft wie folgt ab:

Das Folgende ist der WXML-Code:

<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>

Nach dem Login kopieren

Das Folgende ist der JS-Code:

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);
  }
})

Nach dem Login kopieren

Das Folgende ist der WXSS-Code:

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

Nach dem Login kopieren

Mehrere Optionen markieren Hauptattribute:

Kontrollkästchengruppe

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

Beschreibung tr> bindchange EventHandle < ;checkbox-group/ >Wenn sich das ausgewählte Element ändert, wird das Änderungsereignis ausgelöst, detail = {value:[array of value of the selected checkbox]}

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

Kontrollkästchen

Attributname	Datentyp	Beschreibung	Standardwert
Wert	String	Bezeichner, löst bei Auswahl das Änderungsereignis von aus Wert von
checked	Boolean td>	Ob standardmäßig ausgewählt ist	false
deaktiviert	Boolean	Gibt an, ob deaktiviert ist >	false

Das obige ist der detaillierte Inhalt vonInterpretation und Analyse der Komponenten des WeChat-Miniprogramms: Einführung in die Kontrollkästchenoptionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!