共计 1457 个字符,预计需要花费 4 分钟才能阅读完成。
实现成果
- 应用小程序原生组件,对 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; // 数字越大 放大倍数越大}
- 自定义 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%);
}
正文完