欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-07 12:00:13
最开始想改变radio的样式,但是发现自己写比较方便就直接写了一个。 先上效果: wxml:

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

先上效果:

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

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改变样式,希望对大家有所帮助