shuyuanweb/src/views/pc/aboutMe/AboutMe.vue

<template>
    <div class="about">
        <div class="about-box">
            <van-sticky>
                <div class="form-tab">
                    <span
                        v-for="item in tabArr"
                        :key="item.value"
                        :class="[currentTab == item.value ? 'active' : '']"
                        @click="changeTab(item.value)"
                    >
                        {{ item.label }}
                    </span>
                </div>
            </van-sticky>

            <template v-if="!loading">
                <About
                    :id="'tab' + index"
                    class="scroll-item"
                    v-for="(item, index) in tabArr"
                    :key="item.value"
                    :aboutItem="{
                        label: item.label,
                        value: homeData[tab[index].key],
                    }"
                ></About>
            </template>
        </div>
    </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import About from "./About.vue";
import useHomeStore from "@/store/module/home";
import VueScrollTo from "vue-scrollto";
import { debounce } from "@/utils/common.js";

const homeStore = useHomeStore();
let homeData = ref({});

const tab = [
    {
        label: "区位优势",
        value: 0,
        key: "regionalAdvantages",
    },
    {
        label: "发展机遇",
        value: 1,
        key: "developmentOpportunity",
    },
    {
        label: "配套建设",
        value: 2,
        key: "supportingConstruction",
    },
    {
        label: "发展趋势",
        value: 3,
        key: "developmentTendency",
    },
    {
        label: "交通优势",
        value: 4,
        key: "transportationAdvantage",
    },
    {
        label: "镇域概况",
        value: 5,
        key: "townProfile",
    },
    {
        label: "书院介绍",
        value: 6,
        key: "academyHistory",
    },
];
const tabArr = ref(tab);
const currentTab = ref(0);
const loading = ref(true);
const changeTab = val => {
    currentTab.value = val;
    VueScrollTo.scrollTo(`#tab${val}`, 500, { offset: -132 });
};

const scrollListenerHandler = debounce(() => {
    const scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 滚动条偏移量
    document.querySelectorAll(".scroll-item").forEach((item, index) => {
        if (item.offsetTop - 132 <= scrollTop) {
            currentTab.value = index;
        }
    });
}, 100);
onMounted(() => {
    loading.value = true;
    homeData.value = homeStore.homeData.value;
    loading.value = false;
    window.addEventListener("scroll", scrollListenerHandler);
});
onUnmounted(() => {
    window.removeEventListener("scroll", scrollListenerHandler);
});
</script>
<style lang="scss" scoped>
.about {
    background: rgba(245, 245, 245, 1);
    &-box {
        @include size($contentWidth, auto);
        margin: 0 auto;
        padding: 20px 0 58px;
        @include border-box;
    }
    .form-tab {
        background: rgba(245, 245, 245, 1);
        @include size($contentWidth, auto);
        padding: 25px 0;
        @include flex(row, space-between, center, nowrap);
        @include border-box;
        span {
            width: 200px;
            height: 82px;
            @include font(24px, $color-black);
            font-weight: 500;
            @include flex(row, center, center, nowrap);
            border-radius: 20px;
            cursor: pointer;
            @include border-box;
        }
        .active {
            @include font(24px, $color-white);
            background: rgba(0, 153, 255, 1);
        }
    }
}
</style>