微信小程序实现tabs选项卡功能

纵向的tabs选项卡

wxml:

买房
卖房






恒大雅苑北区 2室1厅\n
46.19m²/南/顶层 共四层\n
350万
573212元/平







恒大天禧 2室1厅\n
46.19m²/南/顶层 共四层\n
350万
573212元/平

js:
page（{
data: {
tabArr: {
curHdIndex: 0,
curBdIndex: 0
},
//tab切换事件
tab: function (e) {
//var dataId = e.currentTarget.dataset.id;
var dataId = e.currentTarget.id;
var obj = {};
obj.curHdIndex = dataId;
obj.curBdIndex = dataId;
this.setData({
tabArr: obj
})
//console.log(e);
}
})

wxss:

.tab-head{
display:flex;
justify-content: space-around;
}
.tab-head .active{
display:block;
background-color: rgb(1,147,255);
color: white;
}
.tab-item .right-item{
display: none;
/* border: 1px solid red; /
}
.tab-item .right-item.active{
display: block
}
.tab-commen{
margin: 10px;
padding: 10px;
text-align: center;
font-size: 15px;
box-shadow: -1rpx 5rpx 5rpx grey;
border: none;
}
.left-bar{
float: left;
margin-left: 20rpx;
width:40%;
border:none;
border-radius: 10rpx;
}
.right-bar{
float: right;
width:40%;
margin-right:20rpx;
border-radius: 10rpx;
}
/ 主页房屋信息 /
.home-view{
width: 90%;
margin: 0 auto;
margin-bottom: 10px;
padding:10px;
padding-bottom: 10px;
border-bottom: 2px solid rgb(224,224,224);
}
.home-img{
width: 112px;
height: 99px;
float: left;
}
.home-img image{
width: 112px;
height: 99px;
}
.home-content{
width: 150px;
float: left;
margin-left: 50px;
height: 99px;
margin-top: 5px;
}
.home-name{
font-size:15px;
}
.home-face{
font-size: 10px;
color:rgba(96, 98, 100, 0.705)
}
.home-price{
font-size: 32rpx;
color: red;
}
.home-price2{
font-size: 12px;
}
.clearfix:after{
clear:both;
display: block;
content: ‘’;
}
.connect{
position: fixed;
bottom: 40px;
right: 15px;
width: 50px;
height: 50px;
z-index: 1000;
/ border: 1px solid red; */
border-radius: 50%;
background-color: rgb(1,147,255);
}

实现效果如下：
在这里插入图片描述