前言
首先看一下微信里边的样式,不同机型可能也略有不同
再来看一下自定义样式,分别展示了
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>
复制代码
注意
- 动态修改
class
样式,需要判断是否可选,再判断一下是否是激活状态。 - 自定义样式要把默认的
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;
}
复制代码
注意
- 样式上没什么难点,只需要准备好默认样式,选中样式和禁止状态下的样式即可。
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
})
复制代码