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

This reverts commit c75a17375aaa4f7ca9e6319ce4b18688b06c862d.
This commit is contained in:
Burt 2024-01-09 09:22:24 +08:00
parent c75a17375a
commit 2878a4fe22
4 changed files with 6 additions and 25 deletions

View File

@ -3,9 +3,7 @@
<view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"> <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<!-- 1/3多于1个页面用返回图标 --> <!-- 1/3多于1个页面用返回图标 -->
<navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon"> <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"></button>
<button class="i-carbon-chevron-left text-white w-7 h-7"></button>
</view>
</navigator> </navigator>
<!-- 2/3只有1个页面如果不是tabbar需要首页图标 --> <!-- 2/3只有1个页面如果不是tabbar需要首页图标 -->
<!-- 这种情况一般出现在用户直接打开分享出去的详情页面或者使用redirectTo等API --> <!-- 这种情况一般出现在用户直接打开分享出去的详情页面或者使用redirectTo等API -->
@ -15,9 +13,7 @@
url="/pages/index/index" url="/pages/index/index"
class="left-icon" 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"></button>
<button class="i-carbon-home text-white w-6 h-6"></button>
</view>
</navigator> </navigator>
<!-- 3/3如果当前页就是tabbar页不用去首页也就是什么图标都不需要 --> <!-- 3/3如果当前页就是tabbar页不用去首页也就是什么图标都不需要 -->
<view class="title">{{ title || '' }}</view> <view class="title">{{ title || '' }}</view>
@ -31,7 +27,6 @@ defineProps<{ title?: string }>()
// //
const pages = getCurrentPages() const pages = getCurrentPages()
const isTabbar = getIsTabbar() const isTabbar = getIsTabbar()
console.log({ isTabbar, pagesLen: pages.length })
// //
const { safeAreaInsets } = uni.getSystemInfoSync() const { safeAreaInsets } = uni.getSystemInfoSync()

View File

@ -1,10 +1,6 @@
<template> <template>
<fly-navbar /> <fly-navbar />
<view class="bg-green-300 min-h-20" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"> <view class="m-4"> 需要设置页面 "navigationStyle": "custom" </view>
<view class="p-4"> 自定义导航栏设置"navigationStyle":"custom" </view>
<view class="p-4"> 通常页面顶部有一个图片或背景色 </view>
</view>
<fly-content :line="20" />
</template> </template>
<route lang="json5"> <route lang="json5">
@ -12,8 +8,3 @@
style: { navigationStyle: 'custom' }, style: { navigationStyle: 'custom' },
} }
</route> </route>
<script lang="ts" setup>
//
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

View File

@ -21,9 +21,7 @@
<view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"> <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<!-- 1/3多于1个页面用返回图标 --> <!-- 1/3多于1个页面用返回图标 -->
<navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon"> <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"> <view class="i-carbon-chevron-left text-current"></view>
<button class="i-carbon-chevron-left text-white w-7 h-7"></button>
</view>
</navigator> </navigator>
<!-- 2/3只有1个页面如果不是tabbar需要首页图标 --> <!-- 2/3只有1个页面如果不是tabbar需要首页图标 -->
<!-- 这种情况一般出现在用户直接打开分享出去的详情页面或者使用redirectTo等API --> <!-- 这种情况一般出现在用户直接打开分享出去的详情页面或者使用redirectTo等API -->
@ -33,9 +31,7 @@
url="/pages/index/index" url="/pages/index/index"
class="left-icon" class="left-icon"
> >
<view class="bg-gray-500 rounded-full w-8 h-8 flex items-center justify-center"> <view class="i-carbon-home text-current"></view>
<button class="i-carbon-home text-white w-6 h-6"></button>
</view>
</navigator> </navigator>
<!-- 3/3如果当前页就是tabbar页不用去首页也就是什么图标都不需要 --> <!-- 3/3如果当前页就是tabbar页不用去首页也就是什么图标都不需要 -->
<view class="title">{{ '我是标题' }}</view> <view class="title">{{ '我是标题' }}</view>

View File

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