微信小程序day03_09之form组件之switch

一. switch

switch 为开关选择器. 常用的属性如下

二. 代码示例

wxml的代码:

   这是一个开关选择器 




   这是一个开关选择器 

js中的代码

Page({
  data: {
      color: "white"
  },
  changeme: function(e){
    var flag = e.detail.value;
    
    //flag 为true 代表为选中的状态
    if(flag){
      this.setData({
        color: "white"
      })

    } else{
      this.setData({
        color: "black"
      })
    }
  }

})

效果如图 , 第一switch 选中的颜色为绿色, 第二个switch选中的颜色为红色,因为第二个switch设置了color 属性. 当switch设置为关闭时, 下面会出现黑色的方块, 是因为js代码中写的逻辑. 官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/switch.html