feat: 自定义导航栏

src/components/fly-content/fly-content.vue

@@ -0,0 +1,11 @@
+<template>
+  <view class="fly-content">
+    <view v-for="n in line" :key="n" class="h-10 leading-10 text-center">
+      很多内容，这里是第{{ n }}行
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+withDefaults(defineProps<{ line?: number }>(), { line: 10 })
+</script>

src/components/fly-navbar/README.md

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

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

@@ -0,0 +1,53 @@
+<template>
+  <!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
+  <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+    <navigator v-if="pages.length > 1" open-type="navigateBack" class="back">
+      <uni-icons type="left" color="white" size="24" />
+    </navigator>
+    <navigator v-else open-type="switchTab" url="/pages/index/index" class="back">
+      <uni-icons type="home" color="white" size="24" />
+    </navigator>
+    <view class="title">{{ title || '' }}</view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ title?: string }>()
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+// 获取页面栈
+const pages = getCurrentPages()
+</script>
+
+<style lang="scss" scoped>
+.fly-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 750rpx;
+  color: #000;
+  background-color: transparent;
+
+  .back {
+    position: absolute;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    font-size: 44rpx;
+    color: #000;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    font-size: 32rpx;
+    color: transparent;
+  }
+}
+</style>