一、效果图
二、代码
/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked { border-color: #03a9f4; background: #03a9f4; } /* 自定义样式.... */ 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::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); }
<radio-group class="radio-group weui-input" bindchange="radioChange"> <radio style="margin-right:10rpx;" class="radio" wx:for-items="{{items}}" wx:for-index="i" wx:key="name" value="{{item.name}}" checked="{{item.checked}}"> <image style="display:inline-block; width:80rpx;height:30rpx;" src="https://www.boyuan.com/file/image/star{{3-i}}.gif"></image> </radio> </radio-group>
const app = getApp(); Page({ data: { items: [ { name: ‘‘, value: ‘3‘, checked: ‘true‘}, { name: ‘‘, value: ‘2‘ }, { name: ‘‘, value: ‘1‘ } ] }, onLoad: function (options) { this.setData({ itemid: options.itemid }) }, onShow: function () { }, radioChange: function (e) { console.log(‘radio发生change事件,携带value值为:‘, e.detail.value) } })