浏览代码

修改首页固定的高度

lex 2 年之前
父节点
当前提交
03179b79f7
共有 2 个文件被更改,包括 16 次插入14 次删除
  1. 12 10
      src/student/home/components/TheHomeHeader/index.tsx
  2. 4 4
      src/student/home/index.tsx

+ 12 - 10
src/student/home/components/TheHomeHeader/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref } from 'vue'
+import { defineComponent, nextTick, onMounted, ref } from 'vue'
 import styles from './index.module.less'
 
 import IconMall from '../../images/icon-mall.png'
@@ -12,7 +12,7 @@ import ColSticky from '@/components/col-sticky'
 
 export default defineComponent({
   name: 'TheHomeHeader',
-  emits: ['cart', 'more', 'search'],
+  emits: ['cart', 'more', 'search', 'headerDom'],
   setup(props, { emit, expose }) {
     const navBarHeight = ref(sessionStorage.getItem('navHeight'))
     const init = () => {
@@ -30,18 +30,20 @@ export default defineComponent({
       })
     }
     init()
-    const homeHeader = ref<any>(null)
+    const homeHeaderDom = ref(null)
 
-    const getHeadeHeight = () => {
-      const { height } = useRect(homeHeader.value)
-      return height
-    }
-    expose({
-      getHeadeHeight
+    onMounted(() => {
+      nextTick(() => {
+        setTimeout(() => {
+          const { height } = useRect(homeHeaderDom as any)
+          emit('headerDom', height)
+        }, 300)
+      })
     })
+
     return () => (
       <ColSticky position="top">
-        <div class={styles.theHomeHeader} ref={homeHeader}>
+        <div class={styles.theHomeHeader} ref={homeHeaderDom}>
           <div
             style={{ height: navBarHeight.value + 'px', background: '#fff' }}
           ></div>

+ 4 - 4
src/student/home/index.tsx

@@ -96,10 +96,6 @@ export default defineComponent({
         }
       })
     })
-
-    this.$nextTick(() => {
-      this.headerHeight = (this as any).$refs.header?.getHeadeHeight()
-    })
   },
   unmounted() {
     removeListenerMessage('webViewOnResume', () => {
@@ -176,6 +172,10 @@ export default defineComponent({
       <div class={styles.home}>
         <TheHomeHeader
           ref="header"
+          onHeaderDom={(height: number) => {
+            console.log(height, 'height')
+            this.headerHeight = height
+          }}
           onCart={() => {
             this.downloadStatus = true
           }}