微信小程序入门（九）：组件switch

switch顾名思义开关，在小程序中也就是一个选择器，状态分为选中和未选中，属性如下

• checked： 是否选中，默认值false
• disabled ：是否禁用，默认值false
• type ：样式，有效值：switch, checkbox 默认值switch
• colo ：switch 的颜色，同 css 的 color 默认值#04BE02
• bindchange ：checked 改变时触发 change 事件，event.detail={ value}
  官方api传送门

看完了官方api小试牛刀一把:

  type:switch
  
    
    {{type_switch}}
  

  type:checkbox
  
    
    {{type_checkbox}}
  

//index.js
Page({
  data: {
    type_switch: "开",
    type_checkbox:"开"
  },

  type_switch(e) {
    var sw = e.detail.value
    this.setData({
     type_switch:e.detail.value?"开":"关"
    })
  },
  type_checkbox(e){
    var sw = e.detail.value
    this.setData({
      type_checkbox: e.detail.value ? "开" : "关"
    })
  }
})

显示结果：

9-1.png

9-2.png