uni-app顶部切换栏

需要vue3和typescript

<!--顶部导航栏-->
<template>
    <view>
        <view class="uni_tab_bar">
            <view class="uni_swiper_tab order_top">
                <block v-for="(tabBar,index) in tabBars" :key="index">
                    <view class="swiper_tab_list" :class="{'active': tabIndex==tabBar.id}" @tap="toggleTab(tabBar.id)">
                        {{tabBar.name}}
                        <view class="swiper_tab_line">
                        </view>
                    </view>
                </block>
            </view>
            <view class="order_centext">
                　　<swiper :current="tabIndex" @change="tabChange" class="order_centext">
                    　　　　<swiper-item v-for="(content,index) in tabBars" :key="index">
                        　　　　　　<view class="swiper_item">{{content.name}}</view>
                        　　　　</swiper-item>
                    　　</swiper>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
    import { ref } from "vue"

    const tabIndex = ref(0)
    const tabBars = ref([
        { name: '待付款', id: '0' },
        { name: '待发货', id: '1' },
        { name: '待收获', id: '2' },
        { name: '已签收', id: '3' },
        { name: '评价', id: '4' },
    ])

    const toggleTab = (index : any) => {
        tabIndex.value = index;
    }

    //滑动切换swiper
    const tabChange = (e : any) => {
        const index = e.detail.current
        tabIndex.value = index
    }
</script>

<style lang="scss">
    .order_top {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #FFFFFF;
    }

    .swiper_tab_list {
        color: #888888;
        font-weight: bold;
    }

    .uni_tab_bar .active {
        color: #FEDE33;
        margin-top: 17rpx;
        background-color: #FFFFFF;
    }

    .active .swiper_tab_line {
        border-bottom: 4rpx solid #FEDE33;
        width: 50rpx;
        margin: auto;
        margin-top: 17rpx;
        background-color: #0B9C13;
    }

    .uni_swiper_tab {
        border-bottom: 2rpx solid #eeeeee;
        margin-bottom: 15rpx;
    }

    .order_centext {
        height: 800rpx;
        position: fixed;
        top: 160rpx;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #8A6DE9;
        margin-left: 15rpx;
        margin-right: 15rpx;
    }
</style>

需要vue3和typescript

自行复制！