wxss 文件：
/* 重写 radio 样式 */
/* 未选中的 背景样式 */
radio .wx-radio-input{
border-radius: 50%;/* 圆角 */
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)
},