微信小程序仿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改变样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是 微信小程序仿RadioGroup改变样式的处理方案 的全部内容, 来源链接: utcz.com/z/359795.html

回到顶部