微信小程序修改radio的样式

        <radio-group bindchange="radioChange">
          <label class="flRlist" wx:for="{
  {productList}}" wx:key="index">           
            <view class="flName">{
  {item.name}}</view>
            <view class="flZT">
              <radio color="#74bfe7" style="transform:scale(0.8);" value="{
  {item.value}}" checked="true"  class="flxzys"/>
            </view>
          </label>
        </radio-group>

radio .wx-radio-input{width:35rpx;height:35rpx;border-radius:50%;border:2rpx solid #000;background:0 0}
radio .wx-radio-input.wx-radio-input-checked{width:35rpx;height:35rpx;border:2rpx solid #000;background-color:#fff!important}
radio .wx-radio-input.wx-radio-input-checked::before{width:35rpx;height:35rpx;border-radius:50%;width:20rpx;height:20rpx;line-height:20rpx;text-align:center;font-size:0rpx;color:transparent;background:#000;transform:translate(-50%,-50%) scale(1)}

  data: {
    productList: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'},
    ]
  },

二：

<view class="flZT">
              <radio color="#74bfe7" style="transform:scale(0.8);" value="{
  {item.value}}" checked="true"  class="flxzys"/>
            </view>

注解：
bindchange：有变化执行事件
wx:for-items：表示对{ {items}}进行循环
<radio>中的color属性：主要设置选中之后图标颜色
<radio>中的style属性：这里主要用来展示图标的大,scale缩放
<radio>中的value属性：主要用于事件bindchange执行之后能获取到值
<radio>中的checked属性：设置默认值
 

  //单选
  radioChange:function(e){
    //获取单选数据
    console.log(e.detail.value)//输出的是{
  {item.name}}的值