首页 > 课堂 > 小程序 > 正文

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

2020-03-21 16:14:38
字体:
来源:转载
供稿:网友

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表