微信小程序之自定义Radio样式

微信小程序之自定义Radio样式

 wxml

<radio-group bindchange="radioChange" class="radio-group-width"><label class="radio-label" wx:if="{{pe=='关台'}}"><view class="radio-text">余额</view><radio value="1" ></radio></label><label class="radio-label"><view class="radio-text">在线支付</view><radio value="2"></radio></label></radio-group>

注意：在文本和radio外面包一层label，作用：点击文字时，radio也会选中

wxss

/* 自定义样式.... */
radio .wx-radio-input {height: 30rpx;/* 对勾大小 */width: 30rpx;margin-top: -4rpx;/* border-radius: 50%; *//* border: 2rpx solid #2ea7e0; *//* background: transparent; */
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before {border-radius: 50%; /* 圆角 */width: 30rpx; /* 选中后对勾大小，不要超过背景的尺寸 */height: 30rpx; /* 选中后对勾大小，不要超过背景的尺寸 */line-height: 30rpx;/* 选中后对勾的垂直方向，等于radio的高度 */text-align: center;font-size: 24rpx; /* 对勾大小 30rpx */color: #fff; /* 对勾颜色 白色 */background: #2ea7e0;transform: translate(-50%, -50%) scale(1);-webkit-transform: translate(-50%, -50%) scale(1);
}.radio-text {font-size: 13px;flex: 1;
}
.radio-label {display:flex;
}.radio-group-width {width: 60%;
}

.wxss样式也可以不用radio .wx-radio-input来修改样式，直接给radio的style设为transform: scale(0.8)即可。

.js

radioChange(options) {console.log('radioChange',options);this.data.radioValue = options.detail.value},