微信小程序仿RadioGroup改变样式的处理方案

最开始想改变Radio的样式，但是发现自己写比较方便就直接写了一个。

先上效果：

wxml：

<view bindchange=\"radioChange\">
<view class=\'list_item\' wx:for=\"{{radioValues}}\" data-index=\"{{index}}\" bindtap=\'radioChange\' style=\"{{index == radioValues.length-1?\'border-bottom:0\':\'\'}}\">
<text style=\'color:rgb(96,96,96)\'>{{item.value}}</text>
<view wx:if=\"{{item.selected}}\" class=\'item\'>
<view style=\'width:20rpx;height:20rpx;background-color:rgb(144,144,144);border-radius:100%;\'></view>
</view> 
<view wx:else class=\'item\'></view> 
</view>
</view>

wcss：

.list_item{
display: flex;
justify-content: space-between;
align-items: center;
margin:0 25rpx;
width:700rpx;
font-size: 30rpx;
color: rgb(79,79,79);
padding: 28rpx 0;
border-bottom:1px solid rgb(209,209,209); 
}
.item{
width: 28rpx;
height: 28rpx;
border: 2px solid rgb(144,144,144);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}

js：

Page({
 data: {
 radioValues: [
{ \'value\': \'未付款订单\', \'selected\': false },
{ \'value\': \'进行中的订单\', \'selected\': false },
{ \'value\': \'完成了的订单\', \'selected\': false },
{ \'value\': \'所有订单\', \'selected\': true },
]
},
 onLoad: function (options) {
},
 radioChange:function(e){
var index = e.currentTarget.dataset.index;
var arr = this.data.radioValues;
for (var v in arr){
if (v == index){
 arr[v].selected = true;
}else{
 arr[v].selected = false;
}
}
this.setData({
 radioValues:arr
})
}
})

以上所述是小编给大家介绍的微信小程序仿RadioGroup改变样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！