switch(开关选择器)组件的应用十分普遍,它有两个状态:开和关

很多地方都会用到开关选择器,如手机的飞行模式、热点,微信的发现页管理中有开、闭朋友圈功能等,如图3.24所示
image.png

switch组件有6个属性可以配置

image.png

  1. index.wxml
  2. -------------
  3. <view>
  4. <view class='item'><switch checked bindchange="switch1Change" />默认打开</view>
  5. <view class='item'><switch bindchange="switch2Change" />默认关闭</view>
  6. <view class='item'><switch disabled bindchange="switch2Change" />禁用</view>
  7. <view class='item'><switch type="checkbox" />禁用</view>
  8. <view class='item'><switch color="red" checked/>背景红色</view>
  9. </view>
  10. -----------------------------------------------------------------------------
  11. index.js
  12. -------------
  13. Page({
  14. switch1Change(e) {
  15. console.log('switch1 发生 change 事件,携带值为', e.detail.value)
  16. },
  17. switch2Change(e) {
  18. console.log('switch2 发生 change 事件,携带值为', e.detail.value)
  19. }
  20. })

image.png