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>

src/pages.json

@@ -5,6 +5,13 @@
       "style": {
         "navigationBarTitleText": "我才是标题"
       }
+    },
+    {
+      "path": "pages/my/index",
+      "style": {
+        "navigationBarTitleText": "我的",
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {

src/pages/index/index.vue

@@ -12,10 +12,10 @@
       Demo Count: {{ countStore.count }}
       <button class="ml-2" @click="countStore.increment">新增</button>
     </view>
-    <uni-icons type="contact" size="30"></uni-icons>
+    <uni-icons type="contact" size="30" color="red"></uni-icons>
     <uni-badge text="1"></uni-badge>
     <!-- Sun in light mode, Moon in dark mode, from Carbon -->
-    <button class="i-carbon-sun dark:i-carbon-moon" />
+    <button class="i-carbon-sun dark:i-carbon-moon text-green-300" />
     <fly-header></fly-header>
   </view>
 </template>

src/pages/my/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <fly-navbar title="导航栏标题" />
+  <scroll-view
+    enable-back-to-top
+    scroll-y
+    class="bg-zinc-100"
+    id="scroller"
+    @scrolltolower="onScrollToLower"
+  >
+    <view class="top-section" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+      <view class="pt-1">顶部区域</view>
+      <view>可以是标题，也可以是个人中心头像等</view>
+      <view>建议本区域高度不低于200rpx</view>
+    </view>
+    <fly-content :line="30" />
+  </scroll-view>
+</template>
+
+<script lang="ts" setup>
+// 页面滚动到底部时的操作，通常用于加载更多数据
+const onScrollToLower = () => {}
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+</script>
+
+<style lang="scss">
+// 这个区域最好要大于200rpx，效果会更好
+.top-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 200rpx;
+  padding: 40rpx 0;
+  line-height: 2;
+  color: #fff;
+  background-image: url('https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/top-bg.png');
+  background-size: cover;
+}
+</style>