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

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

先上效果:

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

wxml:

<view bindchange="radioChange"> <view wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange'> <text>{{item.value}}</text> <view wx:if="{{item.selected}}"> <view></view> </view> <view wx:else></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改变样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/61aad2dc822f32b9b0647e7ffac76232.html