From c75a17375aaa4f7ca9e6319ce4b18688b06c862d Mon Sep 17 00:00:00 2001
From: Burt <1020103647@qq.com>
Date: Tue, 9 Jan 2024 09:05:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20navbar=20=E5=9B=BE=E6=A0=87=E5=8A=A0?=
 =?UTF-8?q?=E5=9C=86=E5=BD=A2=E8=83=8C=E6=99=AF=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fly-navbar/fly-navbar.vue |  9 +++++++--
 src/pages/index/demo/navbar.vue          | 11 ++++++++++-
 src/pages/throughout/index.vue           |  8 ++++++--
 src/utils/index.ts                       |  3 ++-
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/fly-navbar/fly-navbar.vue b/src/components/fly-navbar/fly-navbar.vue
index d35761d..5636cb4 100644
--- a/src/components/fly-navbar/fly-navbar.vue
+++ b/src/components/fly-navbar/fly-navbar.vue
@@ -3,7 +3,9 @@
   <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
     <!-- 1/3，多于1个页面，用返回图标 -->
     <navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
-      <button class="i-carbon-chevron-left text-white"></button>
+      <view class="bg-gray-500/80 rounded-full w-8 h-8 flex items-center justify-center">
+        <button class="i-carbon-chevron-left text-white w-7 h-7"></button>
+      </view>
     </navigator>
     <!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
     <!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
@@ -13,7 +15,9 @@
       url="/pages/index/index"
       class="left-icon"
     >
-      <button class="i-carbon-home text-white"></button>
+      <view class="bg-gray-500/80 rounded-full w-8 h-8 flex items-center justify-center">
+        <button class="i-carbon-home text-white w-6 h-6"></button>
+      </view>
     </navigator>
     <!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
     <view class="title">{{ title || '' }}</view>
@@ -27,6 +31,7 @@ defineProps<{ title?: string }>()
 // 获取页面栈
 const pages = getCurrentPages()
 const isTabbar = getIsTabbar()
+console.log({ isTabbar, pagesLen: pages.length })
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()
diff --git a/src/pages/index/demo/navbar.vue b/src/pages/index/demo/navbar.vue
index b6c0a77..2c6fc38 100644
--- a/src/pages/index/demo/navbar.vue
+++ b/src/pages/index/demo/navbar.vue
@@ -1,6 +1,10 @@
 <template>
   <fly-navbar />
-  <view class="m-4"> 需要设置页面 "navigationStyle": "custom" </view>
+  <view class="bg-green-300 min-h-20" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+    <view class="p-4"> 自定义导航栏，设置"navigationStyle":"custom" </view>
+    <view class="p-4"> 通常页面顶部有一个图片或背景色 </view>
+  </view>
+  <fly-content :line="20" />
 </template>
 
 <route lang="json5">
@@ -8,3 +12,8 @@
   style: { navigationStyle: 'custom' },
 }
 </route>
+
+<script lang="ts" setup>
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+</script>
diff --git a/src/pages/throughout/index.vue b/src/pages/throughout/index.vue
index bad4f22..e70d4c9 100644
--- a/src/pages/throughout/index.vue
+++ b/src/pages/throughout/index.vue
@@ -21,7 +21,9 @@
   <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
     <!-- 1/3，多于1个页面，用返回图标 -->
     <navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
-      <view class="i-carbon-chevron-left text-current"></view>
+      <view class="bg-gray-500 rounded-full w-8 h-8 flex items-center justify-center">
+        <button class="i-carbon-chevron-left text-white w-7 h-7"></button>
+      </view>
     </navigator>
     <!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
     <!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
@@ -31,7 +33,9 @@
       url="/pages/index/index"
       class="left-icon"
     >
-      <view class="i-carbon-home text-current"></view>
+      <view class="bg-gray-500 rounded-full w-8 h-8 flex items-center justify-center">
+        <button class="i-carbon-home text-white w-6 h-6"></button>
+      </view>
     </navigator>
     <!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
     <view class="title">{{ '我是标题' }}</view>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 156116f..3dd0f84 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -4,10 +4,11 @@ console.log(pagesJson)
 
 /** 判断当前页面是否是tabbar页  */
 export const getIsTabbar = () => {
-  if (!pagesJson.tabBar) {
+  if (!pagesJson.tabBar || !pagesJson.tabBar.list.length) {
     return false
   }
   const pages = getCurrentPages()
   const currPath = pages.at(-1).route
+  console.log(currPath)
   return !!pagesJson.tabBar.list.find((e) => e.pagePath === currPath)
 }