fashion-ssr-vue3/pages/index.vue

<!-- @format -->

<script setup lang="ts">
import { useCommonStore } from '@/stores/modules/common'

const commonStore = useCommonStore()

onMounted(() => {
  let lastScrollY = window.scrollY

  const sections = document.querySelectorAll('[data-section]')
  const observerOptions = {
    root: null, // 相对于视口观察
    threshold: [0.1, 0.9], // 区域可见时触发
  }
  const intersectionCallback = (entries: any) => {
    const currentScrollY = window.scrollY
    const isScrollingDown = currentScrollY > lastScrollY
    console.log('intersectionRatio-----111', currentScrollY, lastScrollY, isScrollingDown)
    lastScrollY = currentScrollY

    entries.forEach((entry: any) => {
      const intersectionRatio = entry.intersectionRatio

      if (isScrollingDown && intersectionRatio >= 0.1) {
        console.log('intersectionRatio-----down')
        // 处理向下滚动时的逻辑
        const newColor = entry.target.dataset.sectionColor
        commonStore.setNavigateBgColor(newColor)
      }
      if (!isScrollingDown && intersectionRatio >= 0.1) {
        console.log('intersectionRatio-----up', entry.target)
        // 处理向上滚动时的逻辑
        const newColor = entry.target.dataset.sectionColor
        commonStore.setNavigateBgColor(newColor)
      }
    })
  }
  // 4. 创建观察器实例
  const observer = new IntersectionObserver(intersectionCallback, observerOptions)
  // 5. 开始观察所有区块
  sections.forEach(section => observer.observe(section))

  // 设置首屏默认颜色
  // if (sections.length > 0) {
  //   const cl = sections[0].dataset.sectionColor
  //   console.log('sections', sections, cl)
  //   commonStore.setNavigateBgColor(cl)
  // }

  // 组件卸载时清理
  onUnmounted(() => {
    observer.disconnect()
  })
})
</script>

<template>
  <div>
    <business-home-banner />
    <business-home-solutions />
    <common-block-catalogs />
    <common-block-partner />
    <common-block-exhibited />
    <common-block-blog />
    <common-block-faq />
    <AppFooter />
  </div>
</template>

<style lang="less" scoped></style>