一.html
<view class="tab">
<view class="tab-item {{tab ==0 ?'active':''}}" bindtap="changeItem" data-item="0">大娃</view>
<view class="tab-item {{tab ==1 ?'active':''}}" bindtap="changeItem" data-item="1">二娃</view>
<view class="tab-item {{tab ==2 ?'active':''}}" bindtap="changeItem" data-item="2">三娃</view>
</view>
<view class="content">
<swiper current="{{item}}" bindchange="changeTab">
<swiper-item>a</swiper-item>
<swiper-item>b</swiper-item>
<swiper-item>c</swiper-item>
</swiper>
</view>
二.css
page{
display: flex;
flex-direction: column;
background: #17181a;
color: #ccc;
height: 100%
}
.tab{
display: flex
}
.tab-item{
flex: 1;
text-align: center;
font-size: 30rpx;
line-height: 72rpx;
border-bottom: 6rpx solid #eee;
}
.content{
flex: 1
}
.content>swiper{
height: 100%
}
.tab-item.active{
color: #c25b5b;
border-bottom-color: #c25b5b;
}
三.js
data: {
item:0,
tab:0,}
changeItem(e){
this.setData({
item:e.target.dataset.item
})
},
changeTab(e){
this.setData({
tab:e.detail.current
})
},
来源:CSDN
作者:进阶的巨人001
链接:https://blog.csdn.net/weixin_45389051/article/details/104718887