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

<template>
    <view>
        <view>
            <up-tabs :list="list" @change="handlTabs" :activeStyle="{
                color: 'rgba(221, 94, 69, 1)',
                fontWeight: 'bold',
                transform: 'scale(1.05)'
            }" lineColor="rgba(221, 94, 69, 1)" :current="tabKey" keyName="businessName">
            </up-tabs>
        </view>
        <view scroll-x class="tabs-scroll">
            <!-- <view v-for="item in childrenList" :key="item.id"
                :class="item.id === childrenKey ? 'childern-item item-active' : 'childern-item'"
                @click="childernChange(item)">
                {{ item.businessName }}
            </view> -->

            <up-tabs :list="childrenList" @change="childernChange" :activeStyle="{
                color: 'rgba(221, 94, 69, 1)',
                fontWeight: 'bold',
                transform: 'scale(1.05)'
            }" lineColor="rgba(221, 94, 69, 1)" :current="childrenKey" keyName="businessName">
            </up-tabs>
        </view>
        <view class="tabs-scroll-box">
            <!-- <view class="tabs-scroll2">
                <view v-for="item in children2List" :key="item.id"
                    :class="item.id === children2Key ? 'childern2-item item2-active' : 'childern2-item'"
                    @click="childern2Change(item)">
                    {{ item.businessName }}
                </view>
            </view> -->

            <up-tabs :list="children2List" @change="childern2Change" :activeStyle="{
                color: 'rgba(221, 94, 69, 1)',
                fontWeight: 'bold',
                transform: 'scale(1.05)'
            }" lineColor="rgba(221, 94, 69, 1)" :current="children2Key" keyName="businessName">
            </up-tabs>
        </view>
    </view>
</template>

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

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

const list = ref([])

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

const handlTabs = (e, index) => {
    console.log('e,index', e, index);
    childrenList.value = e.children ? [{
        businessName: '全部',
        id: e.id
    }, ...e.children] : []

    tabKey.value = index;//记录下标
    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);
        handlTabs(tab, index);
    } else {
        handlTabs(dataList[0])
    }
})
</script>

<style scoped lang="scss">
.childern-item {
    font-size: 28rpx;
    font-weight: 400;
    background-color: #f9fafb;
    padding: 12rpx 32rpx;
    margin-right: 16rpx;
    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: 16rpx;
    padding: 0 16rpx;
}

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

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

.childern2-item {
    font-size: 24rpx;
    font-weight: 400;
    background-color: #f9fafb;
    padding: 8rpx 28rpx;
    margin-right: 16rpx;
    border-radius: 4rpx;
    color: #656565;
}

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