需要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
自行复制!