更新

src/components/m-header/index.tsx

@@ -3,15 +3,18 @@ import styles from './index.module.less';
 import logoLarge from '@common/assets/logo-large.png';
 import { Cell, Popup } from 'vant';
 import { useRoute, useRouter } from 'vue-router';
+import { useResizeObserver } from '@vueuse/core';
 
 export default defineComponent({
   name: 'm-header',
-  setup() {
+  emits: ['height'],
+  setup(props, { emit }) {
     const route = useRoute();
     const router = useRouter();
     const isActive = ref(false);
     const showMenu = ref(false);
     const arrowStatus = ref(false);
+    const headerRef = ref();
 
     const onGoDetail = (path: string) => {
       showMenu.value = false;
@@ -27,10 +30,20 @@ export default defineComponent({
       ) {
         arrowStatus.value = true;
       }
+
+      try {
+        useResizeObserver(headerRef.value, (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          emit('height', height);
+        });
+      } catch {
+        //
+      }
     });
     return () => (
       <div class={styles.headerSection} id="headerSection">
-        <div class={styles.header}>
+        <div class={styles.header} ref={headerRef}>
           <img
             class={styles.logo}
             src={logoLarge}

src/views/home/co-person/index.tsx

@@ -56,7 +56,7 @@ export default defineComponent({
           <div class={styles.content}>上传分享曲谱伴奏，可自由定价曲目</div>
 
           <img
-            src="https://oss.dayaedu.com/klx/1699439531248img4.png"
+            src="https://oss.dayaedu.com/klx/1699521877106img4.png"
             class={'w100'}
           />
         </div>

src/views/home/index.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import {
+  defineComponent,
+  watch,
+  reactive,
+  ref,
+  onMounted,
+  nextTick
+} from 'vue';
 import styles from './index.module.less';
 import MHeader from '@/components/m-header';
 import MFooter from '@/components/m-footer';
@@ -10,20 +17,51 @@ import PianoRoom from './piano-room';
 import MusicRoom from './music-room';
 import CoTenant from './co-tenant';
 import CoPerson from './co-person';
-import { useScroll } from '@vueuse/core';
+// import { useResizeObserver, useWindowScroll } from '@vueuse/core';
 
 export default defineComponent({
   name: 'home-page',
   setup() {
     const state = reactive({
       activeTab: 1,
-      banner: aiBanner
+      banner: aiBanner,
+      headerHeight: 0
     });
-    const homeRef = ref<HTMLElement | null>(null);
-    // const { x, y, isScrolling, arrivedState, directions } = useScroll(homeRef);
+    // const headerRef = ref<HTMLElement | null>(null);
+    // const tabRef = ref<HTMLElement | null>(null);
+    // const { x, y } = useWindowScroll();
 
+    // onMounted(() => {
+    //   nextTick(() => {
+    //     try {
+    //       useResizeObserver(headerRef.value, (entries: any) => {
+    //         const entry = entries[0];
+    //         const { height } = entry.contentRect;
+    //         state.headerHeight = height;
+    //       });
+    //     } catch {
+    //       //
+    //     }
+    //   });
+    // });
+    // watch(
+    //   () => y.value,
+    //   () => {
+    //     console.log(y.value, state.headerHeight);
+    //     if (state.headerHeight > 0 && y.value >= state.headerHeight) {
+    //       console.log(document.querySelector('.van-sticky'));
+    //       document
+    //         .querySelector('.van-sticky')
+    //         ?.classList.add('van-sticky--fixed');
+    //     } else {
+    //       document
+    //         .querySelector('.van-sticky')
+    //         ?.classList.remove('van-sticky--fixed');
+    //     }
+    //   }
+    // );
     return () => (
-      <div class={styles.home} ref={homeRef}>
+      <div class={styles.home}>
         <MHeader />
 
         <div class={styles.banner}>