Comment utiliser le sélecteur de commutateur dans l'applet WeChat

Cet article présente principalement en détail l'utilisation du sélecteur de commutateur de l'applet WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cet article partage avec vous le sélecteur de commutateur d'applet WeChat. utiliser le sélecteur de commutateur de programme est pour votre référence. Le contenu spécifique est le suivant

Rendu

WXML

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

Attributs du composant de commutation

• vérifié : s'il faut vérifier — faux, vrai

• type : sélecteur de commutateur style—switch, checkbox

• color : changer de couleur, identique à la couleur CSS

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère Cela sera utile à tout le monde à l’avenir.

Articles connexes :

Comment implémenter une animation offset et uniforme dans JS

Comment implémenter des cellules fusionnées dans un tableau dans Bootstrap

Comment obtenir la première valeur dans la liste déroulante de sélection en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!