uniapp实现弧形tab选项卡

1、效果图

2、完整代码

<template>
  <view class="wrap">
    <view class="tab_box">
      <view class="tab_item" :class="tabIndex == index ? `active active${index}` : ''" v-for="(item, index) in tabList"
        :key="index" @click="changeTab(index)">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 1,
      tabList: [{
        name: '测试1',
        id: 1
      }, {
        name: '测试2',
        id: 2
      }, {
        name: '测试3',
        id: 3
      }],
    };
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index

    },
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 50rpx 30rpx;

  .tab_box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 87rpx;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    background: #F7F0E8;
    color: #78532A;
    font-size: 30rpx;

    .tab_item.active {
      height: 110rpx;
      line-height: 110rpx;
      background: #fff;
      font-weight: bold;

      &::after {
        position: absolute;
        content: "";
        width: 60rpx;
        height: 60rpx;
        right: -60rpx;
        bottom: 0;

      }

      &::before {
        position: absolute;
        content: "";
        width: 60rpx;
        height: 60rpx;
        bottom: 0;
        left: -60rpx;
      }
    }

    .active0 {
      border-radius: 24rpx 24rpx 0 0;

      &::after {
        background: radial-gradient(circle at 60rpx 0, transparent 60rpx, #fff 60rpx);
      }
    }

    .active1 {
      border-radius: 24rpx 24rpx 0 0;

      &::after {

        background: radial-gradient(circle at 60rpx 0, transparent 60rpx, #fff 60rpx);
      }

      &::before {
        background: radial-gradient(circle at 0 0, transparent 60rpx, #fff 60rpx);
      }
    }

    .active2 {
      border-radius: 24rpx 0 0 0;

      &::before {
        background: radial-gradient(circle at 0 0, transparent 60rpx, #fff 60rpx);
      }
    }

    .tab_item {
      position: relative;
      width: 33.33%;
      text-align: center;
      line-height: 87rpx;
    }
  }
}
</style>