小程序radio-group切换

<style>
.transactiondetails-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.transactiondetails-centent{ width: 100%; display: flex; justify-content:space-around; justify-content: flex-start;}
radio-group{
 width: 100%;
 border-bottom: 1px solid #f0f0f0;
}
.flex_box{
 display: flex;
 width: 100%;
 background: #fff;
}
.flex_item{
 flex: 1;
 text-align: center;
}
.flex_item label{
 padding: 10px 0;
 display: inline-block;
 width: 50%;
}
.flex_item label.active{
 color: #000000;
 border-bottom: 2px solid #8dbd53;

}
.radio-centent{ width: 100%; height: 100px; }
</style>
<template type="wxml">
  <view class="transactiondetails-box">
     <view class="transactiondetails-centent">
       <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>
<view class="radio-centent">
         <view wx:if="{{ radioCheckVal==0}}">
           11111
         </view>
         <view wx:if="{{ radioCheckVal==1}}">
           2222
         </view>
         <view wx:if="{{ radioCheckVal==2}}">
          3333
         </view>
</view>

  </view>

</template>
<script>
import wepy from 'wepy';

export default class transactiondetails extends wepy.page {

  config = {
    navigationBarTitleText: '交易明细'
  };
  components = {};

  data = {


  };
  methods = {};

  events = {};
  radioCheckedChange(e) {
    this.setData({
   radioCheckVal:e.detail.value
  })
  }
  onLoad() {};
  // Other properties
}

</script>

转载于:https://www.cnblogs.com/gerry/p/8108579.html