WeChat-Applet-Komponente: Interpretation und Analyse von Schalterauswahlschaltern

Schalterschalter-WahlschalterKomponentenbeschreibung:

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

Wahlschalter umschaltenBeispielcode für den laufenden Effekt As folgt:

Das Folgende ist der WXML-Code:

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

Das Folgende ist der JS-Code:

Page({
  switch1Change: function (e){
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  },
  switch2Change: function (e){
    console.log('switch2 发生 change 事件，携带值为', e.detail.value)
  }
})

Das Folgende ist der WXSS-Code:

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

Haupteigenschaften des Schalterwählers Haupteigenschaften

Attributname

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

Geben Sie

Standardwert

Beschreibung ein

geprüft

Boolean

false

Ob geprüft

Typ

String

Schalter

Stil, gültig Wert: Schalter, Kontrollkästchen

bindchange

EventHandle

Das Änderungsereignis wird ausgelöst wenn geprüft, ändert sich das Ereignis. detail={ value:checked

Persönliche Erfahrung: geeignet für die Auswahl wahr und falsch für ein einzelnes Element, es wird nicht empfohlen, den Kontrollkästchenstil zu verwenden

Dies ist für die Auswahl von wahr geeignet 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 vonWeChat-Applet-Komponente: Interpretation und Analyse von Schalterauswahlschaltern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!