代码提交

components/Header/index.vue

@@ -10,6 +10,7 @@ import { computed, defineProps, ref, toRefs, unref, watch } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import { useRouter } from "@/hooks/useRouter";
 import { createAnimation } from "@/utils/utils";
+import { useScroll } from "@/hooks/useScroll";
 
 const HEADER_HEIGHT = 40 // header高度
 
@@ -66,10 +67,6 @@ const props = defineProps({
     type: String,
     default: () => '#fff'
   },
-  scrollTop: {
-    type: Number,
-    default: () => 0
-  },
   propUp: {
     type: Boolean,
     default: () => true
@@ -94,7 +91,6 @@ const {
   textShadow,
   bgChangeByScroll,
   bgChangeColor,
-  scrollTop,
   propUp,
   showRight,
   leftWidth
@@ -146,7 +142,7 @@ function getMenuInfo() {
 // scss全局变量
 const scssVarStyle = computed(() => {
   return {
-    '--header-height': `${ HEADER_HEIGHT * 2 }rpx`
+    '--header-height': `${ HEADER_HEIGHT }px`
   }
 })
 
@@ -154,7 +150,7 @@ const scssVarStyle = computed(() => {
 const systemBarAreaStyle = computed(() => {
   return {
     width: '100%',
-    height: `${ unref(heightInfo).safeAreaInsets.top * 2 }rpx`,
+    height: `${ unref(heightInfo).statusBarHeight * 2 }rpx`,
     background: unref(systemBarAreaBg)
   }
 })
@@ -163,7 +159,7 @@ const systemBarAreaStyle = computed(() => {
 const headerAreaStyle = computed(() => {
   // 计算margin top
   // margin-top (导航条高度 - 胶囊高度) / 2 永远确保胶囊在header中央
-  const marginTop = unref(menuInfo).height > 0 ? `-${ ((HEADER_HEIGHT - (unref(menuInfo).height)) / 2) * 2 }rpx` : 0
+  const marginTop = unref(menuInfo).height > 0 ? `-${((HEADER_HEIGHT - unref(menuInfo).height))/2}px` : 0
   return {
     width: '100%',
     background: unref(headerAreaBg),
@@ -202,7 +198,7 @@ const scrollMaskStyle = computed(() => {
 
 // 总高度
 const containerHeight = computed(() => {
-  return (unref(heightInfo).safeAreaInsets.top + HEADER_HEIGHT) * 2
+  return (unref(heightInfo).statusBarHeight + HEADER_HEIGHT)
 })
 
 let animation
@@ -212,6 +208,7 @@ function doCreateAnimation() {
   animation = createAnimation(0, scrollEnd, 0, 1)
 }
 
+const {scrollTop} = useScroll();
 watch(scrollTop, () => {
   if (!bgChangeByScroll.value) return
   if (!animation) doCreateAnimation()
@@ -289,7 +286,7 @@ onLoad(() => {
     <!-- 撑起 -->
     <view
         class="prop-up"
-        :style="{height:`${containerHeight}rpx`}"
+        :style="{height:`${containerHeight}px`}"
         v-if="propUp"
     ></view>
   </view>