微信小程序制作选项卡

wxml:

</view>

<view class="tab-com">
<view class="com-item item1 {{tabArr.curBdIndex=='0'? 'active' : ''}}">
<view class="have"><label>可用余额</label><text>￥2123.00</text></view>
<view class="money"><label>充值金额</label><view>￥<input type="number" /></view></view>
<view class="money"><label>支付方式</label><view>￥<input type="number" /></view></view>
</view>
<view class="com-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view>

</view>
</view>

wxss:

page{
background: #fff;
overflow: hidden;
}
.tab-title{
90%;
height: 90rpx;
background: #fff;
display: flex;
flex-direction: row;
flex-wrap:nowrap;
margin: 0 5%;

}
.tab-title .Ttitle{
text-align: center;
50%;
height: 90rpx;
line-height: 90rpx;
font-size: 30rpx;
}

.tab-title .active{
color: #2bb8aa;
border-bottom: solid 1px #2bb8aa;
}
.tab-com{
100%;
border-top: 20rpx solid #f5f5f5;
}
.tab-com .com-item{
display: none;
}
.tab-com .com-item.active{
display: block;
}

/*have */
.tab-com .item1{
font-size: 30rpx;
100%;
overflow: hidden;
color: #555;
}
.tab-com .item1 .have,.tab-com .item1 .money{
line-height: 100rpx;
overflow: hidden;
96%;
padding: 0 2%;
border-bottom: 20rpx solid #f5f5f5;
}
.tab-com .item1 .have label,.tab-com .item1 .money label{
float: left;
}
.tab-com .item1 .have text,.tab-com .item1 .money view{
float: right;
}

.tab-com .item1 .money{
border-bottom: 1rpx solid #f5f5f5;
}

.tab-com .item1 .money input{
150rpx;
height: 95rpx;
font-size: 30rpx;
float: right;
}

JS:

Page({
data: {
tabArr: {
curHdIndex: 0,
curBdIndex: 0
},
},
tabFun: function (e) {
//获取触发事件组件的dataset属性
var _datasetId = e.target.dataset.id;
console.log("----" + _datasetId + "----");
var _obj = {};
_obj.curHdIndex = _datasetId;
_obj.curBdIndex = _datasetId;
this.setData({
tabArr: _obj
});
},
onLoad: function (options) {
// alert("------");
}
});