tab栏切换样式

Posted 2022-07-24 橘子皮放久了的陈

如图：

<template>
  <view class="topTab">
    <view class="tabLeft" @click="realTime">
      <view :class="realEvent == real ? textLine : text">
        实时
      </view>
    </view>
    <view class="tabRight" @click="makeTime">
      <view :class="makeEvent == make ? textLineT : text">
        预约
      </view>
    </view>
  </view>
</template>

<script>
  export default 
    data() 
      return 
        realEvent: real,
        makeEvent: ,
      
    ,

    methods: 
      // 实时
      realTime() 
        this.realEvent = real;
        this.makeEvent = ;
      ,
      // 预约
      makeTime() 
        this.makeEvent = make;
        this.realEvent = ;
      ,
    

  
</script>

<style lang="less">
  .topTab 
    width: 94%;
    margin: 10px auto 0;
    display: flex;
    font-size: 32rpx;


    .tabLeft,
    .tabRight 
      width: 50%;
      text-align: center;
      height: 44rpx;
      line-height: 44rpx;
    

    .tabLeft 
      height: 0;
      border-top: 76rpx transparent;
      border-left: 76rpx solid #41A863;
      border-right: 76rpx solid transparent;
      border-bottom: 76rpx solid #41A863;
      color: #fff;
      border-radius: 36rpx 0 0 36rpx;

      .text 
        margin-top: 16rpx;
      
    

    .tabRight 
      height: 0;
      border-top: 76rpx transparent;
      border-left: 76rpx solid #007AFF;
      border-right: 76rpx solid transparent;
      border-bottom: 76rpx solid #007AFF;
      border-radius: 36rpx 0 0 36rpx;
      transform: rotate(180deg);
      margin-left: -80rpx;
      color: #fff;

      .text 
        transform: rotate(180deg);
        margin-top: 16rpx;
      
    

    .textLine 
      margin: 0 auto;
      width: 76rpx;
      border-bottom: 2px solid #007AFF;
      margin-top: 16rpx;
    

    .textLineT 
      margin: 0 auto;
      width: 76rpx;
      border-bottom: 2px solid #fff;
      transform: rotate(180deg);
      margin-top: 12rpx;
    
  
</style>

如果有更好解决方案的小伙伴，可私信我哦