在开发微信小程序时,我们在使用一些组件的时候,总会遇到设计稿与官方提供的组件样式不太一样的情况,需要想办法修改组件的样式。目前只记录了两个组件的修改方法:switch、checkbox
switch
1. 大小
/* swtich整体大小 */
.wx-switch-input{
width: 100rpx !important;
height: 57rpx !important;
}
/* false的样式 */
.wx-switch-input::before{
width: 100rpx !important;
height: 53rpx !important;
}
/* true的样式 */
.wx-switch-input::after{
width: 57rpx !important;
height: 53rpx !important;
}
以上尺寸根据你的具体情况来调整
2. 颜色
<switch checked bindchange="switch1Change" color="#26a2ff" />
其实switch组件是有一个color属性的,估计除了我之外还有好多人没留意到的,你中枪了吗?
checkbox
/*checkbox 整体大小 */
checkbox {
width: 240rpx;
height: 90rpx;
}
/*checkbox 选项框大小 */
checkbox .wx-checkbox-input {
width: 50rpx;
height: 50rpx;
}
/*checkbox选中后样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #FF525C;
}
/*checkbox选中后图标样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
font-size: 22rpx;
color: #eee;
}