Skip to content

Commit d02081e

Browse files
feige996feige996
committed
feat: 组件自动引入 + 自定义导航栏
1 parent 2ab8375 commit d02081e

File tree

8 files changed

+118
-10
lines changed

8 files changed

+118
-10
lines changed

‎src/components/AppTest.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
2-
<span>
2+
<view>
3+
<view>components 里面的 AppTest.vue 组件</view>
34
<slot />
4-
</span>
5+
</view>
56
</template>

‎src/components/app-test-dir/AppTest2.vue

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<view>
3+
<view>components 里面的 app-test-dir/AppTest.vue 组件</view>
4+
<slot />
5+
</view>
6+
</template>

‎src/components/fly-navbar copy/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# fly-navbar
2+
3+
建议本导航栏组件在设置 `"navigationStyle": "custom"` 的页面使用，目前支持微信小程序的页面滚动动画。

‎src/components/fly-navbar copy/fly-navbar.vue

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
3+
<view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
4+
<!-- 1/3，多于1个页面，用返回图标 -->
5+
<navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
6+
<view class="bg-gray-500/80 rounded-full w-8 h-8 flex items-center justify-center">
7+
<button class="i-carbon-chevron-left text-white w-7 h-7"></button>
8+
</view>
9+
</navigator>
10+
<!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
11+
<!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
12+
<navigator
13+
v-else-if="!isTabbar"
14+
open-type="switchTab"
15+
url="/pages/index/index"
16+
class="left-icon"
17+
>
18+
<view class="bg-gray-500/80 rounded-full w-8 h-8 flex items-center justify-center">
19+
<button class="i-carbon-home text-white w-6 h-6"></button>
20+
</view>
21+
</navigator>
22+
<!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
23+
<view class="title">{{ title || '' }}</view>
24+
</view>
25+
</template>
26+
27+
<script lang="ts" setup>
28+
import { getIsTabbar } from '@/utils/index'
29+
30+
defineProps<{ title?: string }>()
31+
// 获取页面栈
32+
const pages = getCurrentPages()
33+
const isTabbar = getIsTabbar()
34+
console.log({ isTabbar, pagesLen: pages.length })
35+
36+
// 获取屏幕边界到安全区域距离
37+
const { safeAreaInsets } = uni.getSystemInfoSync()
38+
</script>
39+
40+
<style lang="scss" scoped>
41+
.fly-navbar {
42+
position: fixed;
43+
top: 0;
44+
left: 0;
45+
z-index: 9;
46+
width: 750rpx;
47+
color: #000;
48+
background-color: transparent;
49+
50+
.left-icon {
51+
position: absolute;
52+
left: 0;
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
width: 44px;
57+
height: 44px;
58+
font-size: 44rpx;
59+
color: #000;
60+
}
61+
62+
.title {
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
height: 44px;
67+
font-size: 32rpx;
68+
color: transparent;
69+
}
70+
}
71+
</style>

‎src/pages/demo/base/auto-import.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
</route>
77
<template>
88
<div>
9-
<h1>欢迎使用 vitess-uni-app</h1>
9+
<h1>欢迎使用 unibest</h1>
10+
<view class="h-10"></view>
1011
<AppTest> 这个组件会自动导入 </AppTest>
12+
<view class="h-10"></view>
13+
<AppTest2> 这个组件会自动导入 </AppTest2>
1114
</div>
1215
</template>

‎src/pages/demo/base/enum.vue

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
<template>
88
<view class="">enum</view>
9+
<fly-content :line="20" />
910
</template>
1011

1112
<script lang="ts" setup>

‎src/pages/demo/base/navbar.vue

+10-7
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,18 @@
55
</route>
66

77
<template>
8-
<fly-navbar />
9-
<view class="bg-green-300 min-h-20" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
10-
<view class="p-4"> 自定义导航栏，设置"navigationStyle":"custom" </view>
11-
<view class="p-4"> 通常页面顶部有一个图片或背景色 </view>
12-
</view>
8+
<uni-nav-bar
9+
title="自定义导航栏"
10+
left-icon="left"
11+
@clickLeft="goBack"
12+
class="fixed w-full"
13+
></uni-nav-bar>
14+
<view class="h-11"></view>
1315
<fly-content :line="20" />
1416
</template>
1517

1618
<script lang="ts" setup>
17-
// 获取屏幕边界到安全区域距离
18-
const { safeAreaInsets } = uni.getSystemInfoSync()
19+
const goBack = () => {
20+
uni.navigateBack()
21+
}
1922
</script>

‎src/pages/demo/base/no-navbar.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<route lang="json5">
2+
{
3+
style: { navigationBarTitleText: '无导航栏', navigationStyle: 'custom' },
4+
}
5+
</route>
6+
7+
<template>
8+
<fly-navbar />
9+
<view class="bg-green-300 min-h-20" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
10+
<view class="p-4"> 自定义导航栏，设置"navigationStyle":"custom" </view>
11+
<view class="p-4"> 通常页面顶部有一个图片或背景色 </view>
12+
<view class="p-4"> 本实例没有导航栏，但是需要返回 </view>
13+
</view>
14+
<fly-content :line="20" />
15+
</template>
16+
17+
<script lang="ts" setup>
18+
// 获取屏幕边界到安全区域距离
19+
const { safeAreaInsets } = uni.getSystemInfoSync()
20+
</script>

0 commit comments

Comments
 (0)