⼩程序⾃定义switch滑块开关
<checkbox-group name="checkbox">
<view>
<label class="btnOutside {{checkedSwitch==true?'rightOut':''}}" bindtap="checkChange">
<view class="btnInside"></view>
</label>
</view>
</checkbox-group>
js:
data: {
checkedSwitch:true,//开关控制
},
//⽅法
checkChange:function(e){
var that = this;
that.setData({
checkedSwitch:!that.data.checkedSwitch
})
},
css:
/* switch滑块 */
.btnOutside{
display: inline-block;
width:90rpx;
height: 50rpx;
background-color: #fff;
border-radius: 25rpx;
border:2rpx solid #D0D0D0;
borderbox
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;}
}
/* switch滑块结束 */

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。