图片网址: http://files.jb51.net/file_images/article/201707/201776144558704.gif?201766144616
<!--index.wxml-->
<
view
class
=
"container"
>
<
radio-group
bindchange
=
"radioCheckedChange"
>
<
view
class
=
"flex_box"
>
<
view
class
=
"flex_item"
>
<
label
class
=
"{{radioCheckVal==0?'active':''}}"
>人气
<
radio
value
=
"0"
hidden
=
"true"
></
radio
>
</
label
>
</
view
>
<
view
class
=
"flex_item"
>
<
label
class
=
"{{radioCheckVal==1?'active':''}}"
> 销量
<
radio
value
=
"1"
hidden
=
"true"
></
radio
>
</
label
>
</
view
>
<
view
class
=
"flex_item"
>
<
label
class
=
"{{radioCheckVal==2?'active':''}}"
> 价格↑
<
radio
value
=
"2"
hidden
=
"true"
></
radio
>
</
label
>
</
view
>
</
view
>
</
radio-group
>
</
view
>
index.wxml代码中可以看到,首先隐藏radio的原始样式,利用lable点击来触发radioCheckedChange事件监听函数。
/**index.wxss**/
radio-group{
width: 100%;
}
.flex_box{
display: flex;
width: 100%;
background:
#eee;
}
.flex_item{
flex: 1;
text-align: center;
}
.flex_item label{
padding: 10px 0;
display: inline-block;
width: 50%;
}
.flex_item label.active{
color: red;
border-bottom: 2px solid red;
}
index.wxss中,使用flex布局让它们平分,并定义“active”样式。
//index.js
//获取应用实例
var
app = getApp()
Page({
data: {
radioCheckVal:0
},
radioCheckedChange:
function
(e){
this
.setData({
radioCheckVal:e.detail.value
})
}
})
index.js中,定义一个接收radio选中值的变量radioCheckVal,当监听事件被触发时,记录下被选中的radio value。
最重要的一点是这一句:
<label class=
"{{radioCheckVal==0?'active':''}}"
>人气
<radio value=
"0"
hidden=
"true"
></radio>
</label>
|
利用简单的判断表达式,取data中被选中的radio,判断当==当前radio value值时,为lable添加上“active”选中样式。