长春网站建设网/郑州高端网站建设哪家好

前言

首先看一下微信里边的样式，不同机型可能也略有不同

再来看一下自定义样式，分别展示了default、active和disabled状态

自定义样式的好处就是可以适应不同的机型，展示效果基本一致，样式上更美观一些。

代码实现

wxml文件

	<radio-group class="radio-group" bindchange="radioChange"><label class="radio {{!item.show?'disabled':item.checked?'active':'' }}" wx:for="{{items}}"><radio value="{{item.value}}" checked="{{item.checked}}" disabled="{{!item.show}}" style="display:none;"/>{{item.name}}</label></radio-group>
复制代码

注意

1. 动态修改class样式，需要判断是否可选，再判断一下是否是激活状态。
2. 自定义样式要把默认的radio标签隐藏掉，这里通过display:none的方式。

wxss文件

.radio-group .radio {background: #FFFFFF;border: 1px solid #D6D6D6;border-radius: 2px;padding:3px 12px;text-align:center;margin-right:3px;
}
.radio-group .radio.active {//此处省略base64图片地址，太长了！！！background: #ffffff url(data:image/png;base64,iVBORw0KGgo...) no-repeat right bottom;border-color: #0097e0;color: #0097e0;background-size: 14px;
}.radio-group .radio.disabled {background: #f0f0f0;border: 0;color: #0097e0;color: #9fa2ae;
}
复制代码

注意

1. 样式上没什么难点，只需要准备好默认样式，选中样式和禁止状态下的样式即可。

js文件

• 单选框数据结构

 items: [{name: '360',value: '360X',show:true,},{name: '400',value: '400Y',checked: 'true',show:true,},{name: '260',value: '260Z',show:false,}
]
复制代码

• change事件

var items = this.data.items;
var currentItemName = e.detail.value;
for (var i = 0; i < items.length; i++) {if (currentItemName.indexOf(items[i].value) != -1) {items[i].checked = true;} else {items[i].checked = false;}
}
this.setData({items: items
})
复制代码

效果图