Procházet zdrojové kódy

导航栏高度调整

Xiao_123 před 1 měsícem
rodič
revize
311e4f31c8
2 změnil soubory, kde provedl 18 přidání a 16 odebrání
  1. 17 10
      components/Navbar/index.vue
  2. 1 6
      pages/index/position.vue

+ 17 - 10
components/Navbar/index.vue

@@ -47,20 +47,27 @@ defineProps({
 const defaultLogoHeight = 40
 const navbarHeight = ref(0)
 const statusBarHeight = ref(0)
+
 onLoad(() => {
-  const systemInfo = uni.getSystemInfoSync()
-  statusBarHeight.value = systemInfo.statusBarHeight
-  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-  navbarHeight.value = menuButtonInfo.height + ((menuButtonInfo.top - statusBarHeight.value) * 2) + 15
+  try {
+    const systemInfo = uni.getSystemInfoSync()
+    statusBarHeight.value = systemInfo.statusBarHeight
+    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
 
+    // 计算导航栏高度
+    navbarHeight.value = menuButtonInfo.height + 2 * (menuButtonInfo.top - statusBarHeight.value) + statusBarHeight.value
 
-  // 将navbarHeight存入本地缓存
-  const height = navbarHeight.value < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight.value + 10
-  uni.setStorageSync('navbarHeight', height || 65)
-})
+    // 确保导航栏高度不小于 logo 高度 + 10
+    if (navbarHeight.value < defaultLogoHeight + 10) {
+      navbarHeight.value = defaultLogoHeight + 10
+    }
 
-defineExpose({
-  height: navbarHeight.value < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight.value + 10
+    // 将 navbarHeight 存入本地缓存
+    const height = navbarHeight.value < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight.value + 10
+    uni.setStorageSync('navbarHeight', height)
+  } catch (error) {
+    console.error('获取系统信息或菜单按钮信息时出错:', error)
+  }
 })
 </script>
 

+ 1 - 6
pages/index/position.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <Navbar :showLogo="true" ref="navRef" />
+    <Navbar :showLogo="true" />
     <view class="box defaultBgc" :style="{'padding-top': navbarHeight + 'px'}">
       <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
         <view>
@@ -89,7 +89,6 @@ onLoad(() => {
   if (!uni.getStorageSync('token')) getRewardEventList()
 })
 
-const navRef = ref()
 const more = ref('more')
 // 轮播图-优选集团信息
 const preferredGroup = ref({})
@@ -269,11 +268,7 @@ const scrollTop = ref(0)
 const old = ref({
   scrollTop: 0
 })
-const noBgColor = ref(false)
 const onScroll = (e) =>{
-  // const navbarHeight = navRef.value?.height ||  55
-  // noBgColor.value = e.detail.scrollTop > (navbarHeight + 160 + 82) ? true : false
-
   old.value.scrollTop = e.detail.scrollTop
 }