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)
},