在微信小程式中如何使用switch開關選擇器

這篇文章主要為大家詳細介紹了微信小程式switch開關選擇器的使用，具有一定的參考價值，有興趣的小夥伴們可以參考一下

本文為大家分享了微信小程式switch開關選擇器使用方法，供大家參考，具體內容如下

效果圖

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

switch元件的屬性

• checked：是否選取—-false、true

• type：開關選擇器的樣式—- switch, checkbox

• color：switch 的顏色，同css 的color

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在JS中如何實作offset與勻速動畫

在Bootstrap中如何實作表格合併儲存格

在JavaScript中如何實作取得select下拉方塊中第一個值

#

以上是在微信小程式中如何使用switch開關選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！