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

前端之家收集整理的这篇文章主要介绍了微信小程序仿RadioGroup改变样式的处理方案前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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


@H_403_0@先上效果


<p style="text-align: center">


@H_403_0@wxml:


<div class="jb51code">
<pre class="brush:js;">
<view bindchange="radioChange">
<view class='list_item' wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange' style="{{index == radioValues.length-1?'border-bottom:0':''}}">

{{item.value}}
@H_403_0@wcss:

@H_403_0@js:

dioValues: [ { 'value': '未付款订单','selected': false },{ 'value': '进行中的订单',{ 'value': '完成了的订单',{ '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 }) } })
@H_403_0@

总结

@H_403_0@以上所述是小编给大家介绍的微信小程序仿RadioGroup改变样式。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的微信小程序相关文章