小程序的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[i].checked = items[i].value == e.detail.value } this.setData({ items: items }); } })
把 radio 元素隐藏, 宽度设为 0, 切两张图片或者 svg,用 label 元素的 background 属性自定义 radio.
全国7x24小时客服热线
所有故障均24小时内解决
项目一次性收费安心
技术人员均从业5年以上
通过技术营销传播企业服务价值
丰富的行业实战经验积累
基于需求研发多款产品
针对需求提供精细化服务