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