<view class="tab">
<view class="tab-title">
<view class="{{selected1?'border-tottom':'default'}}" bindtap="selected1">标题1</view>
<view class="{{selected2?'border-tottom':'default'}}" bindtap="selected2">标题2</view>
</view>
<view class="tab-content">
<view class="{{selected1?'show':'hidden'}}">内容1</view>
<view class="{{selected2?'show':'hidden'}}">内容2</view>
</view>
</view>
Page({
data:{
selected1:true,
selected2:false
},
selected1:function(e){
this.setData({
selected1:true,
selected2:false
})
},
selected2: function (e) {
this.setData({
selected2: true,
selected1: false
})
}
})
.tab-title{
width:100%;
height:50rpx;
line-height:50rpx;
display:flex;
flex-direction: row;
}
.tab-title view{
flex:auto;
text-align:center;
}
.border-tottom{
border-bottom:1rpx solid red;
}
.show{display:block;}
.hidden{display:none;}