1. 程式人生 > >小程式修改radio預設樣式

小程式修改radio預設樣式

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{classes_array}}" wx:key="{{index}}">
    {{item.name}}<radio value="{{item.name}}" checked="{{item.checked}}" color="#fff"/>
  </label>
</radio-group>
* radio未選中時樣式 */ 

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{
   border: none;
   background: red;
}
/* 選中後的 對勾樣式 (白色對勾 可根據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);
}
data{
 classes_array: [{ name: '全部', checked: false }, { name: '閱讀', checked: false }, { name: '外語', checked: false }, { name: '親子', checked: false }, { name: '技能', checked: false }, { name: '習慣', checked: false }, { name: '運動', checked: false }, { name: '藝術', checked: false }]
  },
  //點選radio-group中的列表項事件
  radioChange: function (res) {
    console.log("選中的標籤:" + res.detail.value);
    var arrs = this.data.classes_array;
    var that = this;
    for (const x in arrs) {
      if (arrs[x].name == res.detail.value) {
        arrs[x].checked = true;
      } else {
        arrs[x].checked = false;
      }
    }
    that.setData({
      classes_array: arrs
    })
  },