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

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

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 }) } })

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

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