Interpretation und Analyse der WeChat-Applet-Komponenten: Switch-Switch-Selektor-Mini-Programmentwicklung-php.cn

Interpretation und Analyse der WeChat-Applet-Komponenten: Switch-Switch-Selektor

巴扎黑

Freigeben： 2017-03-29 09:14:57

Original

2234 Leute haben es durchsucht

Schalterschalter-WahlschalterKomponentenbeschreibung:

Schalter, Schalterwahlschalter. Sie können nur wählen oder nicht wählen. Dieser Typ gehört zur Formularsteuerung oder Abfragebedingungssteuerung.

Wahlschalter umschaltenDer Beispielcode läuft wie folgt:

Das Folgende ist der WXML-Code:

[XML] Nur-Text-Ansicht Code kopieren

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

Nach dem Login kopieren

Das Folgende ist der JS-Code:

[JavaScript] Nur-Text-Ansicht Code kopieren

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

Nach dem Login kopieren

Das Folgende ist der WXSS-Code:

[CSS] Einfache Textansicht Code kopieren

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

Nach dem Login kopieren

Haupteigenschaften des Schalterschalters Haupteigenschaften

Attributname

属性名	类型	默认值	说明
checked	Boolean	false	是否选中
type	String	switch	样式，有效值：switch, checkbox
bindchange	EventHandle		checked改变时触发change事件，event.detail={ value:checked}

Typ

td>

Standardwert

Beschreibung

geprüft

Boolean

false

Ob geprüft

type

String

switch

style, gültige Werte: Schalter, Kontrollkästchen

bindchange

EventHandle

Das Änderungsereignis wird ausgelöst, wenn es aktiviert ist changes, event.detail= { value:checked}

Persönliche Erfahrung: geeignet für die Auswahl wahrer und false für ein einzelnes Element, nicht Es wird empfohlen, den Kontrollkästchenstil

zu verwenden. Dies eignet sich zur Auswahl von true und false für ein einzelnes Element. Es wird nicht empfohlen, den Kontrollkästchenstil zu verwenden. Weil das Kontrollkästchen-Steuerelement bereits vorhanden ist. Außerdem gibt es bei Verwendung des Kontrollkästchen-Stils keinen folgenden Text. Der Text auf dem Bild wurde von mir zusammengesetzt und es wurden keine Steuerereignisse hinzugefügt (sollte nicht auf diese Weise verwendet werden)

Das obige ist der detaillierte Inhalt vonInterpretation und Analyse der WeChat-Applet-Komponenten: Switch-Switch-Selektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!