蛋疼的switch之任性的宽高+携带value

本文涉及的主要组件有：form、checkbox及checkbox-group;

第二次在咱这论坛发帖，有点小紧张……

先看一下官方的：

switch组件可以说是微信滑动按钮的标识了，有点经典;

自带属性：

checked: 选中为true反之false;
type: switch为滑动按钮样式，checkbox为复选框样式（与组件checkbox有点像，一会儿说区别）
bindchange: checked的值改变就触发此事件（点击按钮checked值就变，truefalse来回切换）

聊聊蛋疼的事儿吧：

1、宽高不可修改
2、没有value属性
3、form提交的时候永远携带的是自身的checked值（有毛用?）
4、假设服务端返回数据如下图，那么如何携带id进行回传呢：

btnArray : [//定义假数据
      {id:"10",checked:false},
      {id:"20",checked:true},
      {id:"30",checked:false},
      {id:"40",checked:true},
      {id:"50",checked:false}
    ]

那么既然是这样的话，我也只好那样了，你走你的阳光道，我过我的独木桥……

在见证奇迹之前，还需要介绍麾下一员大将：

自带属性：

1、value：（哇！看！有value！嘘……）可存储要携带的id等
2、disabled：是否禁用checkbox
3、checked： 选中为true反之false
switch组件type为checkbox时，与组件<checkbox/>最大的区别——value；

见证奇迹的时刻：

注：

1、可修改wxss中参数值来调整按钮大小
2、细细看一下js代码有助于控制层于视图层数据绑定的理解
3、单个按钮与组群按钮是不一样的

另：

代码里附着wx:for、wx:key、style、三元运算、formsubmit、组件checkbox-group等基础用法

wxml代码：

  <button>
    数据展示：
    <view wx:for="{{btnArray}}" wx:key="name" class="datashow">
      id:{{item.id}}===><text style="color:{{item.checked==true?'red':'black'}}">{{item.checked}}</text>
    </view>
  </button>
  手写按钮：
  <form bindsubmit="formSubmit">
    <checkbox-group name="checkbox">
      <block wx:for="{{btnArray}}" wx:key="name">
        <view>
          id=>{{item.id}}:
          <label class="btnOutside {{item.checked==true?'rightOut':''}}" data-id="{{index}}" bindtap="checkChange">
            <view class="btnInside"></view>
            <checkbox checked="{{item.checked}}" value="{{item.id}}"/>
          </label>
        </view>
      </block>
    </checkbox-group>
    <text class="notice">注：这里为了效果看得清楚并没有隐藏掉checkbox</text>
    <button formType="submit">提交</button>
  </form>
  <button class="showBtn">选中的值为：{{checked}}</button>
  switch按钮：
  <view>
    <switch/>
  </view>

wxss代码：

page{
    padding: 50rpx;
}
.datashow{
    line-height: 60rpx;
}
.showBtn{
    font-size: 30rpx;
    text-align: left;
    background-color: green;
    color: #fff;
}
.notice{
    display: block;    
    font-size: 30rpx;
    background-color: red;
    color: #fff;
    padding: 10rpx;
    margin-top:20rpx;
}
.btnOutside{
    display: inline-block;
    width:90rpx;
    height: 50rpx;
    background-color: #fff;
    border-radius: 25rpx;
    border:2rpx solid #D0D0D0;
    box-sizing: border-box;
    position: relative;
    animation:leftOut 0.2s linear;
}
.btnInside{
    width:48rpx;
    height: 48rpx;
    background-color: #fff;
    border-radius: 50%;
    border:2rpx solid #D0D0D0;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: -2rpx;
    animation:leftIn 0.2s linear;
}
.rightOut .btnInside{
    border:2rpx solid #04BE02;
    left:40rpx;
    animation:rightIn 0.2s linear;
}
.rightOut{
    background-color: #04BE02;
    animation:rightOut 0.2s linear;
}
@keyframes rightIn{
    from{border:2rpx solid #D0D0D0;
    left:-2rpx;}
    to{border:2rpx solid #04BE02;
    left:40rpx;}
}
@keyframes leftIn{
    from{border:2rpx solid #04BE02;
    left:40rpx;}
    to{border:2rpx solid #D0D0D0;
    left:-2rpx;}
}
@keyframes rightOut{
    from{background-color: #fff;}
    to{background-color: #04BE02;}
}
@keyframes leftOut{
    from{background-color: #04BE02;}
    to{background-color: #fff;}
}

js代码：

Page({
  data:{
    btnArray : [//定义假数据
      {id:"10",checked:false},
      {id:"20",checked:true},
      {id:"30",checked:false},
      {id:"40",checked:true},
      {id:"50",checked:false}
    ],
    checked:''//定义选中字段
  },
  checkChange:function(e){
      let index = e.currentTarget.dataset.id;//获取for循环中当条的ID
      this.data.btnArray[index].checked = !this.data.btnArray[index].checked;//控制层允许修改data里面的数组或对象
      this.setData({
        btnArray:this.data.btnArray//修改完之后必须再次setData，避免控制层与视图层数据不一致
      })
  },
  formSubmit: function(e) {
    let checked = e.detail.value.checkbox.toString();//把选中值的数组转成字符串
    this.setData({checked:checked});
  }
})