本文涉及的主要組件有：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});
  }
})