实现成果

  1. 应用小程序原生组件，对switch进行款式批改
    毛病：宽高减少的话，增的那局部点击切换时不太灵活

    <switch class="switch-item" checked="{{ switchChecked }}" color="#1180FD" bindchange="switchChange"/>

办法一：间接批改css款式

/*swtich整体大小*/.switch-item{    width:105rpx !important;    height: 40rpx !important;}/*红色款式（switch敞开状态的款式）*/.switch-item::before{    width:105rpx !important;    height: 40rpx !important;    background-color: #EBEDF5 !important;}/*绿色款式（switch关上状态的款式）*/.switch-item::after{    width: 38rpx !important;     height: 38rpx !important;    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);    left: 0 !important;}

办法二： 应用zoom缩放

.switch-item{    zoom: 1.1; // 数字越大  放大倍数越大}
  1. 自定义switch
 <view class="switch-box" data-checked="{{ switchChecked }}" bindtap="switchChange">     <view class="switch {{ switchChecked ? 'switch-checked' : '' }}">        <view></view>     </view>    <text qq:if="{{ !switchChecked }}">背诵模式</text></view>
.switch-box {    position: relative;}.switch-box text {    position: absolute;    color: #B7B8BB;    font-size: 16rpx;    line-height: 40rpx;    right: 10rpx;    top: 0;}.switch {    width: 100%;    height: 40rpx;    background-color: #1180FD;    border-radius: 9999rpx;    position: relative;}.switch::before {    display: block;    content: '';    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    border-radius: 9999rpx;    background: #EBEDF5;    transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);}.switch-checked::before {    transform: scale(0);}.switch view {    position: absolute;    top: 0;    left: 0;    width: 40rpx;    height: 40rpx;    border-radius: 50%;    background: #fff;    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);    transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);}.switch-checked view {    left: 100%;    transform: translateX(-100%);}