小程序 之修改radio默認樣式

一、效果圖

 

 二、代碼

/* 選中后的 背景樣式 （紅色背景 無邊框 可根據UI需求自己修改） */

radio .wx-radio-input.wx-radio-input-checked {
  border-color: #03a9f4;
  background: #03a9f4;
}

/* 自定義樣式.... */

radio .wx-radio-input {
  height: 40rpx;
  width: 40rpx;
  margin-top: -4rpx;
  border-radius: 50%;
  border: 2rpx solid #999;
  background: transparent;
}

/* 選中后的 對勾樣式 （白色對勾 可根據UI需求自己修改） */

radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%; /* 圓角 */
  width: 40rpx; /* 選中后對勾大小，不要超過背景的尺寸 */
  height: 40rpx; /* 選中后對勾大小，不要超過背景的尺寸 */
  line-height: 40rpx;
  text-align: center;
  font-size: 30rpx; /* 對勾大小 30rpx */
  color: #fff; /* 對勾顏色 白色 */
  background: #f00;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

 

<radio-group class="radio-group weui-input" bindchange="radioChange">
      <radio style="margin-right:10rpx;" class="radio" wx:for-items="{{items}}" wx:for-index="i" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
          <image style="display:inline-block; width:80rpx;height:30rpx;" src="https://www.boyuan.com/file/image/star{{3-i}}.gif"></image>
       </radio>
</radio-group>

　　

const app = getApp();
Page({
  data: {
    items: [
      { name: '', value: '3', checked: 'true'},
      { name: '', value: '2' },
      { name: '', value: '1' }
    ]
  },
  onLoad: function (options) {
    this.setData({
      itemid: options.itemid
    })
  },
  onShow: function () {

  },
  radioChange: function (e) {
    console.log('radio發生change事件，攜帶value值為：', e.detail.value)
  }
})