一級(jí)標(biāo)題

直接上代碼

<template>
    <view class="page">
        <view class="body-container">
            <u-sticky :offset-top="`${barH}px`">
                <view class="patinetInfo-tabs-view">
                    <view class="tab-layout">
                        <view
                            v-for="(item, $index) in data.tabOptiions"
                            :key="$index"
                            :class="tabStyle(item)"
                            @tap.stop="tabClick(item.value, $index)"
                            >{{ item.label }}</view
                        >
                    </view>
                </view>
            </u-sticky>

            <view class="swiper-view">
                <swiper class="swiper-layout" :current="data.sBarIndex" @change="swiperChange">
                    <swiper-item
                        v-for="(equityItem, index) in data.equityList"
                        :key="`swiper-${index}`"
                        class="swiper-item-view"
                    >
                        <view :class="{ 'desc-view': true, 'hide-item': index != data.sBarIndex }">
                            {{ index }}
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { computed, onMounted, reactive } from 'vue'
import { getBarInfo } from '@/utils/baseUtil'

const data = reactive({
    tabOptiions: [
        { label: '就診旅程', value: 0 },
        { label: '重點(diǎn)指標(biāo)檢測', value: 1 },
        { label: '同類型患者情況', value: 2 },
    ],
    selectTab: 0,
    sBarIndex: 0,
    equityList: [{}, {}, {}],
})

onShow(() => {
    console.log('---onShow--')
})

onMounted(() => {
    console.log('---onMounted')
})

const barH = computed(() => {
    return getBarInfo().barH
})

const tabStyle = computed(() => {
    return ({ value }) => {
        return {
            active: value === data.selectTab || data.selectTab.toString() === value.toString(),
        }
    }
})

/* 外層tab切換 */
const tabClick = (val, index) => {
    console.log('-外層tab--', val, index)
    if (data.selectTab === val || data.selectTab.toString() === val.toString()) {
        return
    }
    data.sBarIndex = index
    data.selectTab = val
}

/* 輪播切換 */
const swiperChange = (e) => {
    console.log('-e--', e.detail.current)
    tabClick(e.detail.current, e.detail.current)
}
</script>

<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;

    .body-container {
        width: 100%;

        .patinetInfo-tabs-view {
            // width: 100%;
            padding-left: 32rpx;
            padding-right: 32rpx;
            box-sizing: border-box;
            background-color: #eff5ff;
            // background-color: #ffffff;

            .tab-layout {
                box-sizing: border-box;
                width: 100%;
                height: 88rpx;
                background-color: #eff5ff;
                // background-color: #ffffff;
                width: 100%;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                view {
                    transition: all 0.3s;
                    font-size: 30rpx;
                    line-height: 40rpx;
                    color: #7c7c86;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    // width: 33.33%;
                }
                .active {
                    position: relative;
                    color: #2d7bf6;
                    font-size: 30rpx;
                    line-height: 40rpx;
                    &::after {
                        position: absolute;
                        content: '';
                        width: 40rpx;
                        height: 4rpx;
                        background: #2d7bf6;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
        }

        .swiper-view {
            background-color: yellow;
            margin-top: 200rpx;
            padding-left: 32rpx;
            padding-right: 32rpx;
            box-sizing: border-box;
            height: 100%;

            .swiper-layout {
                width: 100%;
                height: 300rpx;
                box-sizing: border-box;
                margin-bottom: 60rpx;
                background-color: orchid;

                .swiper-item-view {
                    width: 100%;
                    .hide-item {
                        transition: all 0.2s ease-in-out;
                        transform: scale(0.9, 0.9);
                        opacity: 0.1;
                    }
                    .desc-view {
                        transition: all 0.2s ease-in-out;
                        transform-origin: center;
                        box-sizing: border-box;
                        background: #ffffff;
                        border-radius: 12rpx;
                        width: 100%;
                        height: 300rpx;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        background-color: rgb(96, 239, 129);
                    }
                }
            }
        }
    }
}
</style>