本文編輯：  技術藍天瀏覽 6641 4 版權所有，嚴禁轉載

組件說明:

switch，開關選擇器。只能選擇或者不選。這種屬于表單控件或者查詢條件控件。

組件用法：

wxml

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

js

Page({
  switch1Change: function (e){
    console.log('switch1 發生 change 事件，攜帶值為', e.detail.value)
  },
  switch2Change: function (e){
    console.log('switch2 發生 change 事件，攜帶值為', e.detail.value)
  }
})

wxss

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

主要屬性

個人經驗:適用于選擇一單項選擇true和false，不建議用checkbox樣式

這個適用于選擇一單項選擇true和false，不建議使用checkbox樣式。因為checkbox控件已經有了。而且，這種用checkbox樣式時，沒有帶后面的文本，圖片上文本是我拼湊的，還沒有加控制事件（不應該這么用）