详解微信小程序Radio选中样式切换

图片网址： http://files.jb51.net/file_images/article/201707/201776144558704.gif?201766144616

< 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。

最重要的一点是这一句：

"{{radioCheckVal==0?'active':''}}" >人气
    "0"  hidden= "true" >

利用简单的判断表达式，取data中被选中的radio,判断当==当前radio value值时，为lable添加上“active”选中样式。