leromro-mini/pages_home/components/tabs/index.vue

<template>
    <view>
        <view class="tabs-container">
            <view class="tabs-row no-gap">
                <up-tabs :list="getFirstRowTabs()" @change="handlTabs" :activeStyle="{
                    color: 'rgba(221, 94, 69, 1)',
                    fontWeight: 'bold',
                    transform: 'scale(1.05)',
                    fontSize: '24rpx'
                }" 
                :inactiveStyle="{
                    fontSize: '24rpx'
                }"
                lineColor="rgba(221, 94, 69, 1)" :current="tabKey" keyName="businessName">
                </up-tabs>
            </view>
            
            <!-- Second row of tabs -->
            <view class="tabs-row no-gap">
                <up-tabs :list="getSecondRowTabs()" @change="handlSecondRowTabs" :activeStyle="{
                    color: 'rgba(221, 94, 69, 1)',
                    fontWeight: 'bold',
                    transform: 'scale(1.05)',
                    fontSize: '24rpx'
                }"
                :inactiveStyle="{
                    fontSize: '24rpx'
                }"
                lineColor="rgba(221, 94, 69, 1)" :current="secondRowTabKey" keyName="businessName">
                </up-tabs>
            </view>
        </view>
        
        <view class="tabs-scroll">
            <up-tabs :list="childrenList" @change="childernChange" :activeStyle="{
                color: 'rgba(221, 94, 69, 1)',
                fontWeight: 'bold',
                transform: 'scale(1.05)',
                fontSize: '22rpx'
            }"
            :inactiveStyle="{
                fontSize: '22rpx'
            }"
            lineColor="rgba(221, 94, 69, 1)" :current="childrenKey" keyName="businessName">
            </up-tabs>
        </view>
        <view class="tabs-scroll-box">
            <up-tabs :list="children2List" @change="childern2Change" :activeStyle="{
                color: 'rgba(221, 94, 69, 1)',
                fontWeight: 'bold',
                transform: 'scale(1.05)',
                fontSize: '20rpx'
            }"
            :inactiveStyle="{
                fontSize: '20rpx'
            }"
            lineColor="rgba(221, 94, 69, 1)" :current="children2Key" keyName="businessName">
            </up-tabs>
        </view>
    </view>
</template>

<script setup>
import {
    ref,
    onMounted,
    reactive,
    nextTick,
    computed
} from 'vue';
import {
    onLoad,
    onShow,
    onReachBottom
} from "@dcloudio/uni-app"

const emits = defineEmits(['change'])
const tabKey = ref(0);//tab的下标
const secondRowTabKey = ref(0);//第二行tab的下标
const childrenKey = ref(null);//二级的id
const children2Key = ref(null);//三级的id

const list = ref([])
const splitIndex = computed(() => Math.ceil(list.value.length / 2)); // 计算分割点

// 获取第一行的tabs
const getFirstRowTabs = () => {
    return list.value.slice(0, splitIndex.value);
}

// 获取第二行的tabs
const getSecondRowTabs = () => {
    return list.value.slice(splitIndex.value);
}

const childrenList = ref([]);//二级的数据
const children2List = ref([]);//三级的数据

// 处理第一行标签点击
const handlTabs = (e, index) => {
    childrenList.value = e.children ? [{
        businessName: '全部',
        id: e.id
    }, ...e.children] : []

    tabKey.value = index;//记录下标
    secondRowTabKey.value = -1; // 重置第二行选中状态
    childrenKey.value = 0;
    children2Key.value = 0;
    children2List.value = [];
    emits('change', e)
}

// 处理第二行标签点击
const handlSecondRowTabs = (e, index) => {
    childrenList.value = e.children ? [{
        businessName: '全部',
        id: e.id
    }, ...e.children] : []

    secondRowTabKey.value = index;//记录下标
    tabKey.value = -1; // 重置第一行选中状态
    childrenKey.value = 0;
    children2Key.value = 0;
    children2List.value = [];
    emits('change', e)
}

const childernChange = (e, index) => {
    children2List.value = e.children ? [{
        businessName: '全部',
        id: e.id
    }, ...e.children] : [];
    children2Key.value = 0;
    childrenKey.value = index;
    emits('change', e)
}

const childern2Change = (e, index) => {
    children2Key.value = index;
    emits('change', e)
}

onMounted(() => {
})

onLoad((options) => {
    const dataList = JSON.parse(decodeURIComponent(options.dataList));
    list.value = dataList
    if (options.id) {
        const tab = dataList.find(item => item.id === options.id);
        const index = dataList.findIndex(item => item.id === options.id);
        // 判断点击的是第一行还是第二行
        if (index < splitIndex.value) {
            handlTabs(tab, index);
        } else {
            // 计算在第二行中的索引
            const secondRowIndex = index - splitIndex.value;
            handlSecondRowTabs(tab, secondRowIndex);
        }
    } else {
        handlTabs(dataList[0], 0);
    }
})
</script>

<style scoped lang="scss">
.tabs-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #F6F6F6;
    padding: 0rpx 35rpx;
}

.tabs-row {
    width: 100%;
    margin-bottom: 6rpx;
}

/* 添加无间隔样式 */
.no-gap :deep(.u-tabs__wrapper__nav__item) {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* 平均分配宽度 */
    flex: 1 !important;
    text-align: center;
}

.childern-item {
    font-size: 26rpx;
    font-weight: 400;
    background-color: #f9fafb;
    padding: 8rpx 24rpx;
    margin-right: 10rpx;
    border-radius: 19998rpx;
}

.item-active {
    background: rgba(251, 229, 225, 1);
    color: rgba(221, 94, 69, 1);
}

.tabs-scroll {
    display: flex;
    align-items: center;
    margin-top: 10rpx;
    padding: 0 12rpx;
}

.tabs-scroll-box {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    margin-top: 6rpx;
}

.tabs-scroll2 {
    margin-top: 10rpx;
    padding: 0 12rpx;
    width: max-content;
    display: flex;
    align-items: center;
}

.childern2-item {
    font-size: 22rpx;
    font-weight: 400;
    background-color: #f9fafb;
    padding: 6rpx 20rpx;
    margin-right: 10rpx;
    border-radius: 4rpx;
    color: #656565;
}

.item2-active {
    background: rgba(251, 229, 225, 1);
    color: rgba(221, 94, 69, 1);
}
</style>