也许你要早上七点起床，晚上十二点睡觉，日复一日，踽踽独行。但只要笃定而动情地活着，即使生不逢时，你人生最坏的结果，也只是大器晚成。
本文实例为大家分享了微信小程序自定义单项选择器样式的具体代码，供大家参考，具体内容如下
效果：
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
})
}
})
以上就是微信小程序自定义单项选择器样式。专注于你所爱的，聚焦于你正在追求的，不要让别人影响你的步履。将真实的世界真正纳入你的眼界，你会发现普通的常识其实并不普通，简单的生活其实也并不简单。你需要重新认识自我，你需要坚定成功的步伐，因为幸运之神只眷顾持续努力的人。更多关于微信小程序自定义单项选择器样式请关注haodaima.com其它相关文章！