小程序 中 自定义单选框样式

<radio-group  name="country" class="radio-group" bindchange="radioChange">
      <label class="radio" wx:for="{{items}}"  wx:key="{{index}}">
        <radio value='{{item.value}}' checked='{{item.checked}}'></radio>
        <!-- <radio value="{{item.name}}" checked="{{item.checked}}" /> -->
        <block wx:if="{{yjIndex == item.value}}">
          <image src='../img/diananniu_yidian.png'></image>
        </block>
        <block wx:else>
          <image src='../img/diananniu_weidian.png'></image>
        </block>
        {{item.name}}
      </label>
  </radio-group>

data数据

items:[
      { name: '是', value: 1 },
      { name: '否', value: 0 ,checked:true}
    ],

yjIndex:0,

单选点击事件

radioChange:function (event) {
    this.setData({
      yjIndex: event.detail.value
    })
  },

　CSS样式

.radio{
  position:relative;
}
.radio radio{
  opacity: 0;
}
.radio image{
  position:absolute;
  top:0;
  left:0;
  width:44rpx;
  height:44rpx;
}

　　

转载于:https://www.cnblogs.com/dyy-dida/p/10374329.html