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

图片网址： 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”选中样式。