小程序的radio样式自定义是可以的,直接用display:none隐藏掉,然后用新标签实现。
<radio-group bindchange="radioChange">
<label class="ui-radio {{item.checked==true?'active':''}}" wx:for="{{items}}>
checked ="{{item.checked}}">radio>
<text class="text">{{item.name}}text>
label>
radio-group>
.ui-radio radio,.ui-radio checkbox {
display: none;
}
.ui-radio .text {
/*设计样式*/
}
.ui-radio.checked .text {
/*设计样式*/
}
Page({
data: {
items: [
{value: 'USA', name: '美国'},
{value: 'CHN', name: '中国', checked: 'true'},
{value: 'BRA', name: '巴西'},
{value: 'JPN', name: '日本'},
{value: 'ENG', name: '英国'},
{value: 'FRA', name: '法国'},
]
},
radioChange: function(e) {
console.log('radio发生change事件,携带value值为:', e.detail.value)
var items = this.data.items;
for (var i = 0, len = items.length; i < len; ++i) {
items.checked = items.value == e.detail.value
}
this.setData({
items: items
});
}
})
把 radio 元素隐藏, 宽度设为 0, 切两张图片或者 svg,用 label 元素的 background 属性自定义 radio.
