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

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

高洛峰
高洛峰Original
2017-03-19 17:32:042231Durchsuche

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:

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

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>



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


    Das Folgende ist der WXSS-Code:

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

Mehrere Optionen markieren Hauptattribute:


Kontrollkästchengruppe


属性名称

数据类型

描述

bindchange

EventHandle

中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}

Attributname


Datentyp

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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn