Pārlūkot izejas kodu

Revert "feat: navbar 图标加圆形背景色"

This reverts commit c75a17375aaa4f7ca9e6319ce4b18688b06c862d.
Burt 2 gadi atpakaļ
vecāks
revīzija
2878a4fe22

+ 2 - 7
src/components/fly-navbar/fly-navbar.vue

@@ -3,9 +3,7 @@
   <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="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>
+      <button class="i-carbon-chevron-left text-white"></button>
     </navigator>
     <!-- 2/3,只有1个页面,如果不是tabbar,需要首页图标 -->
     <!-- 这种情况一般出现在用户直接打开分享出去的详情页面,或者使用redirectTo等API -->
@@ -15,9 +13,7 @@
       url="/pages/index/index"
       class="left-icon"
     >
-      <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>
+      <button class="i-carbon-home text-white"></button>
     </navigator>
     <!-- 3/3,如果当前页就是tabbar页,不用去首页,也就是什么图标都不需要 -->
     <view class="title">{{ title || '' }}</view>
@@ -31,7 +27,6 @@ defineProps<{ title?: string }>()
 // 获取页面栈
 const pages = getCurrentPages()
 const isTabbar = getIsTabbar()
-console.log({ isTabbar, pagesLen: pages.length })
 
 // 获取屏幕边界到安全区域距离
 const { safeAreaInsets } = uni.getSystemInfoSync()

+ 1 - 10
src/pages/index/demo/navbar.vue

@@ -1,10 +1,6 @@
 <template>
   <fly-navbar />
-  <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" />
+  <view class="m-4"> 需要设置页面 "navigationStyle": "custom" </view>
 </template>
 
 <route lang="json5">
@@ -12,8 +8,3 @@
   style: { navigationStyle: 'custom' },
 }
 </route>
-
-<script lang="ts" setup>
-// 获取屏幕边界到安全区域距离
-const { safeAreaInsets } = uni.getSystemInfoSync()
-</script>

+ 2 - 6
src/pages/throughout/index.vue

@@ -21,9 +21,7 @@
   <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="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>
+      <view class="i-carbon-chevron-left text-current"></view>
     </navigator>
     <!-- 2/3,只有1个页面,如果不是tabbar,需要首页图标 -->
     <!-- 这种情况一般出现在用户直接打开分享出去的详情页面,或者使用redirectTo等API -->
@@ -33,9 +31,7 @@
       url="/pages/index/index"
       class="left-icon"
     >
-      <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>
+      <view class="i-carbon-home text-current"></view>
     </navigator>
     <!-- 3/3,如果当前页就是tabbar页,不用去首页,也就是什么图标都不需要 -->
     <view class="title">{{ '我是标题' }}</view>

+ 1 - 2
src/utils/index.ts

@@ -4,11 +4,10 @@ console.log(pagesJson)
 
 /** 判断当前页面是否是tabbar页  */
 export const getIsTabbar = () => {
-  if (!pagesJson.tabBar || !pagesJson.tabBar.list.length) {
+  if (!pagesJson.tabBar) {
     return false
   }
   const pages = getCurrentPages()
   const currPath = pages.at(-1).route
-  console.log(currPath)
   return !!pagesJson.tabBar.list.find((e) => e.pagePath === currPath)
 }