wxss 文件：
/* 重寫 radio 樣式 */
/* 未選中的 背景樣式 */
radio .wx-radio-input{
border-radius: 50%;/* 圓角 */
width: 40rpx;
height: 40rpx;
border: none;
background: none;
position: absolute;
right: 0rpx;
}
/* 選中后的 背景樣式 （紅色背景 無邊框 可根據UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked{
border: none !important;
background: none !important;
position: absolute;
right: 0rpx;
}
.attr_value {
position:relative;
margin: 0 20rpx;
}
/* 選中后的 對勾樣式 （白色對勾 可根據UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
line-height: 40rpx;
text-align: center;
font-size:38rpx; /* 對勾大小 30rpx */
color:red; /* 對勾顏色 白色 */
background: transparent;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
.radio-group {
background: #fff;
}
.radio {
display: block;
border-top: 1px solid #ddd;
padding: 10rpx;
}
.radio:first-child {
border:none;
}
.section_gap {
line-height: 80rpx;
}
wxml文件：
<view class='notice'>請選擇你在使用中所遇到的問題</view>
<view class="page__bd">
<view class="section section_gap">
<radio-group class="radio-group" bindchange="radioChange">
<view class="attr_value">
<radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
<view>{{item.value}}</view>
</radio>
</view>
</radio-group>
</view>
</view>
js文件：
data: {
items: [
{ name: '功能不全', value: '功能不全' },
{ name: '比較難用', value: '比較難用' },
{ name: '界面錯位', value: '界面錯位' },
{ name: '頁面加載很慢', value: '頁面加載很慢' },
{ name: '無法打開小程序', value: '無法打開小程序' },
{ name: '閃退/卡頓/黑屏白屏', value: '閃退/卡頓/黑屏白屏' },
{ name: '其他', value: '其他' },
]
},
// 選擇方法
radioChange: function (e) {
console.log('radio發生change事件，攜帶value值為：', e.detail.value)
},