小程序 switch按钮

Posted ThisCall

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序 switch按钮相关的知识,希望对你有一定的参考价值。

<view class=‘pay-switch‘>
<switch color=‘#1F3238‘ data-gongprice=‘{{gongprice}}‘ data-discounts=‘{{discounts}}‘ bindchange="switch1Change" />
</view>
 
 
.pay-choice{
height: 40rpx;
overflow: visible;
}
.pay-choice icon{
/* margin-top: 20rpx; */
height: 40rpx;

}
.pay-switch{
height: 44rpx;
overflow: visible;
}
.pay-switch .wx-switch-input-checked::after{
width:20px;
height: 20px;
}
.pay-switch .wx-switch-input-checked{
width:40px;
height: 22px;
}
.pay-switch .wx-switch-input::after{
width:20px;
height: 20px;
}
.pay-switch .wx-switch-input:before{
width:40px;
height: 22px;
}
.pay-switch .wx-switch-input:before{
width:40px;
height: 22px;
}
.pay-switch .wx-switch-input{
width:40px;
height: 22px;
}

以上是关于小程序 switch按钮的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

微信小程序把玩(二十一)switch组件

微信小程序 switch 样式

微信小程序 开关选择器 switch 组件

微信小程序组件解读和分析:十switch 开关选择器

微信小程序 按钮效果