效果如图:
<view class="tabs">
<view
v-for="(item,index) in navList"
:key="index"
class="tab-li"
:class="expressTypeMendian==item.id&&'active'"
@click="expressTypeMendian=item.id">{{ item.title }}</view>
</view>
expressTypeMendian = 1
navList = [
{ id: 1, title: '上门自取' },
{ id: 2, title: '同城配送' }
]
.tabs{
position: relative;
height: 80rpx;
}
.tab-li{
position: absolute;
top: 0;
width: 305rpx;
text-align: center;
height: 0;
line-height: 80rpx;
border-bottom: 80rpx solid transparent;
border-bottom-color: transparent;
&:nth-of-type(1){
left: 0;
border-right: 40rpx solid transparent;
}
&:nth-of-type(2){
right: 0;
border-left: 40rpx solid transparent;
}
&.active{
font-size: 30rpx;
font-weight: bold;
z-index: 9;
border-bottom-color: #fff !important;
}
}