1.效果图

image.png

2.原理

主要是通过判断一个radio-group中哪个被选中，就让它加上一个“active”的样式。

3.代码

1)页面

  2. <!--index.wxml-->
  3. <view class="container">
  4.   <radio-group bindchange="radioCheckedChange">
  5.     <view class="flex_box">
  6.       <view class="flex_item">
  7.         <label class="{{radioCheckVal==0?'active':''}}">人气
  8.           <radio value="0"   hidden="true"></radio>
  9.         </label>
  10.       </view>
  11.       <view class="flex_item">
  12.         <label class="{{radioCheckVal==1?'active':''}}"> 销量
  13.           <radio  value="1"  hidden="true"></radio>
  14.         </label>
  15.       </view>
  16.       <view class="flex_item">
  17.         <label class="{{radioCheckVal==2?'active':''}}"> 价格↑
  18.           <radio value="2" hidden="true"></radio>
  19.         </label>
  20.       </view>
  21.     </view>
  22.   </radio-group>
  23. </view>

首先隐藏radio的原始样式，利用lable点击来触发radioCheckedChange事件监听函数。

2)css

  1. /**index.wxss**/
  2. radio-group{
  3.   width: 100%;
  4. }
  5. .flex_box{
  6.   display: flex;
  7.   width: 100%;
  8.   background: #eee;
  9. }
  10. .flex_item{
  11.   flex: 1;
  12.   text-align: center;
  13. }
  14. .flex_item label{
  15.   padding: 10px 0;
  16.   display: inline-block;
  17.   width: 50%;
  18. }
  19. .flex_item label.active{
  20.   color: red;
  21.   border-bottom: 2px solid red;
  23. }

使用flex布局让它们平分，并定义“active”样式。

3)js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
   radioCheckVal:0
  },
  radioCheckedChange:function(e){
    this.setData({
      radioCheckVal:e.detail.value
    })
  }
})

定义一个接收radio选中值的变量radioCheckVal，当监听事件被触发时，记录下被选中的radio value

4.总结

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