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

 wxml

<radio-group bindchange="radioChange" class="radio-group-width">
    <label class="radio-label" wx:if="{{rechargeValue.type=='关台'}}">
      <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
  },