Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie die Schalterauswahl im WeChat-Applet

So verwenden Sie die Schalterauswahl im WeChat-Applet

亚连
亚连Original
2018-06-08 16:28:353013Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung des WeChat-Applet-Selektors im Detail vor. Er hat einen gewissen Referenzwert.

Dieser Artikel teilt Ihnen die Vorgehensweise zum WeChat-Applet-Switch mit Die Verwendung des Programmschalter-Selektors dient als Referenz. Der spezifische Inhalt lautet wie folgt:

So verwenden Sie die Schalterauswahl im WeChat-AppletWXML

<view class="tui-list-box">
 <view class="tui-menu-list">
  <text>状态:{{isChecked1}}</text>
  <switch class="tui-fr" checked="{{isChecked1}}" bindchange="changeSwitch1"/>
 </view>
 <view class="tui-menu-list">
  <text>状态:{{isChecked2}}</text>
  <switch class="tui-fr" checked="{{isChecked2}}" bindchange="changeSwitch2"/>
 </view>
 <view class="tui-menu-list">
  <text>状态:{{isChecked3}}</text>
  <switch class="tui-fr" color="#007aff" checked="{{isChecked3}}" bindchange="changeSwitch3"/>
 </view>
 <view class="tui-menu-list">
  <text>状态:{{isChecked4}}</text>
  <switch class="tui-fr" color="#007aff" checked="{{isChecked4}}" bindchange="changeSwitch4"/>
 </view>
 <view class="tui-menu-list">
  <text>状态:{{isChecked5}}</text>
  <switch class="tui-fr" type="checkbox" checked="{{isChecked5}}" bindchange="changeSwitch5"/>
 </view>
 <view class="tui-menu-list">
  <text>状态:{{isChecked6}}</text>
  <switch class="tui-fr" type="checkbox" checked="{{isChecked6}}" bindchange="changeSwitch6"/>
 </view>
</view>

JS

var pageObj = {
 data: {
  isChecked1: false,
  isChecked2: true,
  isChecked3: false,
  isChecked4: true,
  isChecked5: false,
  isChecked6: true
 }
};

for (var i = 0; i < 7; ++i) {
 (function (i) {
  pageObj[&#39;changeSwitch&#39; + i] = function (e) {
   var changedData = {};
   changedData[&#39;isChecked&#39; + i] = !this.data[&#39;isChecked&#39; + i];
   this.setData(changedData);
  }
 })(i)
}
Page(pageObj);

Attribute der Schalterkomponente

    geprüft: ob geprüft werden soll – falsch, wahr
  • Typ: der Stil des Schalters Selektor – Schalter, Kontrollkästchen
  • Farbe: Die Farbe des Schalters, dieselbe wie die CSS-Farbe
  • Das Obige habe ich für alle zusammengestellt Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie versetzte und einheitliche Animationen in JS

So implementieren Sie in einer Tabelle zusammengeführte Zellen in Bootstrap

So erhalten Sie den ersten Wert im Auswahl-Dropdown-Feld in JavaScript

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Schalterauswahl im WeChat-Applet. 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