技術標籤：筆記

效果如圖：

上程式碼：

html // js

<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: '同城配送' }
]
 

css

.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;
    }
}