feat: 实现首页TopBar分离

xh-polaris · Aug 2, 2023 · 5c24763 · 5c24763
1 parent 00de49a
commit 5c24763
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 38 deletions.
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
@@ -0,0 +1,34 @@
+<template>
+  <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
+    <view class="top-bar" :style="{ height: topBarHeight + 'px' }"></view>
+    <view class="capsule-bar" :style="{ height: capsuleBarHeight + 'px' }">
+      <slot></slot>
+    </view>
+  </view>
+  <view :style="{ height: navBarHeight + 'px' }"></view>
+</template>
+
+<script setup lang="ts">
+const topBarHeight = uni.getSystemInfoSync().statusBarHeight as number;
+const capsuleData = uni.getMenuButtonBoundingClientRect();
+const capsuleBarHeight =
+  capsuleData.height + (capsuleData.top - topBarHeight) * 2;
+const navBarHeight = topBarHeight + capsuleBarHeight;
+</script>
+
+<style scoped lang="scss">
+.nav-bar {
+  position: fixed;
+  background-color: #fafcff;
+  width: 100vw;
+  z-index: 100;
+}
+.top-bar {
+  width: 100vw;
+}
+.capsule-bar {
+  width: 100vw;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/components/top-bar/top-bar.vue b/src/components/top-bar/top-bar.vue
diff --git a/src/pages/community/community.vue b/src/pages/community/community.vue
@@ -1,24 +1,20 @@
 <template>
-  <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
-    <view class="top-bar" :style="{ height: topBarHeight + 'px' }"></view>
-    <view class="capsule-bar" :style="{ height: capsuleBarHeight + 'px' }">
-      <view class="school-box">
-        <view class="school-select-box">
-          <image class="arrow" :src="Icons.Location" @click="onClickSwitch" />
-          <view class="names" @click="onClickSwitch">
-            <view class="school-name">
-              {{ currentSchool }}
-            </view>
-            <view v-if="currentSchool !== currentCampus" class="campus-name">
-              ({{ currentCampus }})</view
-            >
-            <view v-else class="campus-name"></view>
+  <TopBar bg-color="#fafcff">
+    <view class="school-box">
+      <view class="school-select-box">
+        <image class="arrow" :src="Icons.Location" @click="onClickSwitch" />
+        <view class="names" @click="onClickSwitch">
+          <view class="school-name">
+            {{ currentSchool }}
           </view>
+          <view v-if="currentSchool !== currentCampus" class="campus-name">
+            ({{ currentCampus }})</view
+          >
+          <view v-else class="campus-name"></view>
         </view>
       </view>
     </view>
-  </view>
-  <view :style="{ height: navBarHeight + 'px' }"></view>
+  </TopBar>
 
   <view class="background">
     <view v-if="!isRefreshing">
@@ -44,6 +40,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from "vue";
+import TopBar from "@/components/TopBar.vue";
 import { Icons } from "@/utils/url";
 import MasonryFrame from "@/pages/community/masonry-frame.vue";
 import Cards from "@/pages/community/cards/cards.vue";
@@ -151,21 +148,6 @@ onShow(() => {
   margin-left: 20rpx;
 }
 
-.nav-bar {
-  position: fixed;
-  background-color: #fafcff;
-  width: 100vw;
-  z-index: 100;
-}
-.top-bar {
-  width: 100vw;
-}
-.capsule-bar {
-  width: 100vw;
-  display: flex;
-  align-items: center;
-}
-
 .navbtn {
   color: #939393;
   font-size: calc(10 / 390 * 100vw);