uniapp vue3 实现可滑动切换tabs标题栏

<template>
  <view class="tab-bar">
    <scroll-view class="scroll-view_H" scroll-x="true">
      <view class="tab-bar-item" v-for="(tab, index) in tabs" :key="index" @tap="onTabTap(index)">
        <image
          :src="index == tabIndex ? '图片1' : '图片2'"
          mode="aspectFit" class="tab-item-icon" />
        <text class="tab-bar-item-text" :style="{ color: index == tabIndex ? '#FBFDFC' : '#BACDDE' }">
          {{ tab.name }} </text>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, type PropType } from 'vue'

const tabIndex = ref(0)

const props = defineProps({
  tabs: {
    type: Array,
    default() {
      return [{
        type: 1 ,
        name: '标题1'
      },
      {
        type: 2
        name: '标题2'
      },
      {
        type: 3,
        name: '标题3'
      }]
    }
  },
})


const onTabTap = (index: number) => {
  tabIndex.value = index
  emit('onTabTap', tabIndex.value, props.tabs[tabIndex.value].type)
}

const emit = defineEmits(['onTabTap'])
</script>

<style scoped lang="scss">
.tab-bar {
  margin: 10rpx;
  padding: 12rpx 0;
  background: #fff;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .tab-bar-item {
    width: 236rpx;
    height: 56rpx;
    display: inline-block;
    position: relative;

    .tab-item-icon {
      width: 236rpx;
      height: 56rpx;
    }

    .tab-bar-item-text {
      width: 236rpx;
      font-weight: 600;
      position: absolute;
      left: 0;
      top: 10%;
      margin-left: 0 auto;
      text-align: center;


    }
  }
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}
</style>

上面是子组件 

<TopTabBar  @onTabTap="onTabTap"  :tabs="tabs"></TopTabBar>

<script setup lang="ts">
const rewardBoxType = ref()

let  tabs= ref( [{
        type: 1,
        name: '标题1'
      },
      {
        type: 2,
        name: '标题2'
      },
      {
        type: 3,
        name: '标题3'
      }])


const onTabTap = (index: number, type: any) => {
 //点击之后要做的事件
  rewardBoxType.value = type

}    


</script>