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

<template>
    <view>
        <view class="tabs-container">
            <view class="tabs-row no-gap">
                <view v-for="(item, index) in list" :key="item.id"
                    :class="tabKey === index ? 'tab-item tab-active' : 'tab-item'" @click="handlTabs(item, index)">
                    {{ item.businessName }}
                </view>
            </view>
            <view class="tabs-row no-gap">
                <view v-for="(item, index) in childrenList" :key="item.id"
                    :class="childrenKey === index ? 'tab-item tab-active' : 'tab-item'"
                    @click="childernChange(item, index)">
                    {{ item.businessName }}
                </view>
            </view>
            <view class="tabs-row no-gap">
                <view v-for="(item, index) in children2List" :key="item.id"
                    :class="children2Key === index ? 'tab-item tab-active' : 'tab-item'"
                    @click="childern2Change(item, index)">
                    {{ item.businessName }}
                </view>
            </view>
        </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;

    display: grid;
    grid-template-columns: repeat(5, 1fr); // 4列布局
    gap: 20rpx; // 网格间距



}

.tab-item {
    font-family: PingFang SC;
    font-size: 30rpx;
    font-weight: normal;
    line-height: 48rpx;
    letter-spacing: normal;
    color: #818181;

    padding: 10px 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-active {
    font-family: PingFang SC;
    font-size: 30rpx;
    font-weight: 600;
    line-height: 48rpx;
    letter-spacing: normal;
    color: #1A1A1A;
    border-bottom: 4px solid #D94342;
}

/* 添加无间隔样式 */
.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>