小程式修改radio預設樣式
阿新 • • 發佈:2018-12-09
<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 }) },