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)
- },
来源: http://www.bubuko.com/infodetail-3449152.html