From e6253d84fd94efb9a046b7604fb32b880cf83ec3 Mon Sep 17 00:00:00 2001
From: Burt <1020103647@qq.com>
Date: Tue, 9 Jan 2024 09:23:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20fly-navbar=20=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=8A=A0=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 ++++++++++-
 2 files changed, 17 insertions(+), 3 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>