本篇内容介绍了“微信小程序radio样式怎么自定义”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
小程序的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.
“微信小程序radio样式怎么自定义”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!