微信小程序仿选项按钮组改变样式的处理方案

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

先上效果：

wxml:

view bind change=' radio change ' view class=' list _ item ' wx : for=' { { radio values } } ' data-index=' { { index } } ' bind tap=' radio change ' style=' { { index==radio values。长度-1？边框-底部：0 ' : ' ' } '文本样式=' color : RGB(96，96，96)' { { item。value } }/text view wx : if=' { { item。selected } } ' class=' item '视图样式=' width :20 rpx高度：20rpx背景-颜色：rgb(144，144，144)；'边框-半径：100%;'/view/view view wx : else class=' item '/view/view/view wcss:list _ item { display : flex justice-content :空格；align-items:居中；margin:0 25rpx宽度宽度：700 rpx font-size : 30 rpx；color: rgb(79，79，79)；padd : 28 rpx 0；边框-底部：1px纯色rgb(209，209，209)；}.项目{ width : 28 rpxhire : 28 rpxborder : 2px纯色rgb(144，144，144)；边界半径： 100%;display : flex align-items :居中；正义-内容：中心；}js:

页面({ data : { radio values :[{ ' value ' : ')未付款订单，' selected': false }，{ 'value': '进行中的订单，' selected': false }，{ 'value': '完成了的订单，' selected': false }，{ 'value': '所有订单，' selected': true }，]}，onLoad:函数(选项){}，radio change :函数(e){ var index=e . currenttarget。数据集。指数；var arr=这个。数据。无线电值；for(var v in arr){ if(v==index){ arr[v]).selected=true}else{ arr[v].selected=false} }这。setdata({ radio values 3360 arr })})总结

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