在我看来这个主要是样式，相当于自己重新写一个switch样式，下面直接看源码
目录结构
switch.wxml
<view class="switch"><view class="container"><text class="title">自定义switch</text><view class="switch-container"><view style="margin-right:20px" wx:for="{{switchData}}" wx:key="index"><switchItme id="{{item.id}}" bindmyevent="tagSwitch" dataItem="{{item}}"></switchItme></view></view><text class="title">微信switch</text><view class="switch-container"><switch/></view></view></view>
switch.js
Page({data: {switchData: [{id: 1,color: 'darkorange',isOn: false},{id: 2,color: 'red',isOn: true},{id: 3,isOn: false,},{id: 4,color: 'firebrick',isOn: true}],},tagSwitch(event) {let index = event.currentTarget.id - 1;this.data.switchData[index].isOn = !this.data.switchData[index].isOnthis.setData({switchData: this.data.switchData});}})
switch.wxss
.switch-container {text-align: center;display: flex;display: -webkit-flex;margin-bottom: 200rpx;}
switch.json
{"usingComponents": {"switchItme": "/component/switchItem/index"}}
switchItem.wxml
<view class="switchBox"><view class="switch {{dataItem.isOn ? 'toggle-on' : 'toggle-off'}}" style="background-color:{{dataItem.isOn ? dataItem.color || '#09bb07' : '#ddd'}}" bindtap="tapSwitch"></view></view>
switchItem.js
Component({properties: {dataItem:{type:Object}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {tapSwitch() {this.triggerEvent('myevent',{})}}})
switchItem.wxss
.switch {position: relative;overflow: hidden;width: 52px;height: 32px;border-radius: 16px;}.switch::before {content: "";position: absolute;background-color: #fff;border-radius: 15px;transition: all ease-out 0.3s;-webkit-transition: all 0.3s;}.switch::after {position: absolute;display: inline-block;content: "";margin-top: 1px;height: 30px;width: 30px;border-radius: 50%;background-color: #fff;transition: left 0.2s ease-out;-webkit-transition: left ease-out 0.2s;}.toggle-off {background-color: #e5e5e5;}.toggle-off::before {width: 50px;height: 30px;left: 1px;top: 1px;}.toggle-off::after {left: 1px;box-shadow: 1px 2px 4px #aaa;}.toggle-on::before {width: 0px;height: 0px;left: 30px;top: 15px;}.toggle-on:after {left: 21px;}
这个主要还是样式，把样式写出来了，就好办了，这里就不多讲了
