微信小程序改变原生radio的样式
--------wx.ml------
<view class="page__bd">
<view class="section section_gap">
<radio-group class="radio-group" bindchange="radioChange">
<radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
<text>{{item.value}}</text>
</radio>
</radio-group>
</view>
</view>
------wx.ss-----
radio .wx-radio-input {
width: 40rpx;
height: 40rpx;
border: 4rpx solid #999;
border-radius: 100%;
background: none;
}
/*单选按钮选中后内部样式*/
radio .wx-radio-input.wx-radio-input-checked {
border: 4rpx solid #e4e5e6!important;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 60%;
height: 60%;
background: #080808;
border-radius: 100%;
content: '';
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
---------wx.js-----
Page({
data: {
items: [
{ name: 'USA', value: '赵四' },
{ name: 'CHN', value: '刘能', checked: 'true' },
{ name: 'TUR', value: '谢广坤' },
],
radioItems: [
{ name: 'USA', value: '赵四' },
{ name: 'CHN', value: '刘能', checked: 'true' },
{ name: 'BRA', value: '谢广坤' },
],
hidden: false
},
radioChange: function (e) {
var checked = e.detail.value
var changed = {}
for (var i = 0; i < this.data.radioItems.length; i++) {
if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
changed['radioItems[' + i + '].checked'] = true
} else {
changed['radioItems[' + i + '].checked'] = false
}
}
this.setData(changed)
}
})
界面图片