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

文章目录

• 一. switch
• 二. 代码示例

一. switch

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

二. 代码示例

wxml的代码:

<view>
  <switch checked='true'> 这是一个开关选择器 </switch>

</view>

<view>
  <switch checked='true' color='red' bindchange='changeme'> 这是一个开关选择器 </switch>

</view>

<view style='background-color:{{color}};width:100%;height:700rpx'></view>

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