feat: navbar 图标加圆形背景色

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()

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>

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>

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)
 }