微信小程序仿RadioGroup改变样式的处理方案
程序员文章站
2022-05-07 12:00:13
最开始想改变radio的样式,但是发现自己写比较方便就直接写了一个。
先上效果:
wxml:
最开始想改变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改变样式,希望对大家有所帮助
上一篇: 微信小程序实现默认第一个选中变色效果