<v-tabs v-model="current" :tabs="tabs" :pills="true" pillsBorderRadius="30px" pillsColor="#FF6E42" bgColor="#F5F5F5" line-height="0" activeColor="#fff" @change="changeTab"></v-tabs> 用uniapp中的组价来实现上边的效果

要在uni-app中实现类似的效果，你可以使用uni-ui插件来创建选项卡导航菜单。下面是一个示例代码，演示如何使用uni-ui的`uni-tabs`组件来实现类似的效果：

<template>
  <view>
    <uni-tabs v-model="current" :tabs="tabs" :pills="true" :pills-border-radius="30" :pills-color="#FF6E42"
      :bg-color="#F5F5F5" :line-height="0" :active-color="#fff" @change="changeTab"></uni-tabs>
  </view>
</template>

<script>
import uniTabs from '@/uni-ui/uni-tabs/uni-tabs.vue'

export default {
  components: {
    uniTabs
  },
  data() {
    return {
      current: 0,
      tabs: [
        { title: 'Tab 1' },
        { title: 'Tab 2' },
        { title: 'Tab 3' }
      ]
    }
  },
  methods: {
    changeTab(index) {
      console.log('Current tab index:', index)
    }
  }
}
</script>

在这个示例中，我们引入了`uni-tabs`组件并注册为`uniTabs`，然后在模板中使用`<uni-tabs>`标签来创建选项卡导航菜单。我们通过绑定`v-model`指令来实现当前选中选项卡的双向绑定，`:tabs`属性用于传入选项卡的数据数组，`:pills`属性用于设置选项卡为圆形样式，`:pills-border-radius`属性用于设置圆形选项卡的边框半径，`:pills-color`属性用于设置选项卡的颜色，`:bg-color`属性用于设置整个选项卡的背景颜色，`:line-height`属性用于设置选项卡的行高，`:active-color`属性用于设置选中选项卡的颜色，`@change`监听选项卡切换事件并调用`changeTab`方法。

请注意，你需要先安装并引入uni-ui插件，以及在项目的manifest.json文件中声明使用uni-ui组件。具体的安装和使用方法可以参考uni-ui的官方文档。