From 6e3448582b37e13b7240506008d50e4cd4f48a5b Mon Sep 17 00:00:00 2001
From: Burt <1020103647@qq.com>
Date: Wed, 3 Jan 2024 17:09:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fly-content/fly-content.vue | 11 +++++
 src/components/fly-navbar/README.md        |  3 ++
 src/components/fly-navbar/fly-navbar.vue   | 53 ++++++++++++++++++++++
 src/pages.json                             |  7 +++
 src/pages/index/index.vue                  |  4 +-
 src/pages/my/index.vue                     | 39 ++++++++++++++++
 6 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 src/components/fly-content/fly-content.vue
 create mode 100644 src/components/fly-navbar/README.md
 create mode 100644 src/components/fly-navbar/fly-navbar.vue
 create mode 100644 src/pages/my/index.vue

diff --git a/src/components/fly-content/fly-content.vue b/src/components/fly-content/fly-content.vue
new file mode 100644
index 0000000..66d5a0a
--- /dev/null
+++ b/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>
diff --git a/src/components/fly-navbar/README.md b/src/components/fly-navbar/README.md
new file mode 100644
index 0000000..cd5cf97
--- /dev/null
+++ b/src/components/fly-navbar/README.md
@@ -0,0 +1,3 @@
+# fly-navbar
+
+建议本导航栏组件在设置 `"navigationStyle": "custom"` 的页面使用，目前支持微信小程序的页面滚动动画。
diff --git a/src/components/fly-navbar/fly-navbar.vue b/src/components/fly-navbar/fly-navbar.vue
new file mode 100644
index 0000000..3048832
--- /dev/null
+++ b/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>
diff --git a/src/pages.json b/src/pages.json
index 3179fc8..de10049 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -5,6 +5,13 @@
       "style": {
         "navigationBarTitleText": "我才是标题"
       }
+    },
+    {
+      "path": "pages/my/index",
+      "style": {
+        "navigationBarTitleText": "我的",
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 10a3640..8c668e0 100644
--- a/src/pages/index/index.vue
+++ b/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>
diff --git a/src/pages/my/index.vue b/src/pages/my/index.vue
new file mode 100644
index 0000000..a4ac34f
--- /dev/null
+++ b/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>