带弧形选项卡切换uniapp

在uniapp中实现带弧形选项卡切换的效果，可以通过自定义组件和CSS样式来完成。以下是一个简单的实现步骤：

1. **创建自定义选项卡组件**：
首先，创建一个自定义选项卡组件，例如`curved-tabs.vue`。

<template>
  <view class="tabs">
    <view class="tab" v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)">
      <text :class="['tab-text', { active: index === currentTab }]">{{ tab }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentTab: 0
    };
  },
  methods: {
    selectTab(index) {
      this.currentTab = index;
      this.$emit('change', index);
    }
  }
};
</script>

<style scoped>
.tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px;
}
.tab-text {
  font-size: 16px;
  color: #666;
}
.tab-text.active {
  color: #007aff;
  font-weight: bold;
}
</style>

2. **在页面中使用自定义选项卡组件**：
在需要使用选项卡的页面中引入并使用该组件。

<template>
  <view class="container">
    <curved-tabs :tabs="tabList" @change="onTabChange"></curved-tabs>
    <view class="content">
      <text>{{ currentTabContent }}</text>
    </view>
  </view>
</template>

<script>
import CurvedTabs from '@/components/curved-tabs.vue';

export default {
  components: {
    CurvedTabs
  },
  data() {
    return {
      tabList: ['首页', '发现', '我的'],
      currentTabContent: '首页内容'
    };
  },
  methods: {
    onTabChange(index) {
      switch(index) {
        case 0:
          this.currentTabContent = '首页内容';
          break;
        case 1:
          this.currentTabContent = '发现内容';
          break;
        case 2:
          this.currentTabContent = '我的内容';
          break;
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.content {
  margin-top: 20px;
  text-align: center;
}
</style>

3. **效果调整**：
可以通过调整CSS样式来进一步美化选项卡，例如添加渐变背景、圆角等。

.tabs {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
}
.tab-text.active {
  color: #fff;
}

通过以上步骤，你可以在uniapp中实现一个带弧形选项卡切换的效果。