微信小程序自定义单项选择器样式

本文实例为大家分享了微信小程序自定义单项选择器样式的具体代码，供大家参考，具体内容如下

效果：

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': '所有订单、'选中' : 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 })})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。