From 3f5818ed8678a6526a9aeba4cd41ae53aabc8914 Mon Sep 17 00:00:00 2001
From: Burt <1020103647@qq.com>
Date: Wed, 3 Jan 2024 21:21:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(tabbar):=20=E5=A4=84=E7=90=86tabbar?=
 =?UTF-8?q?=E5=92=8C=E9=80=9A=E5=B1=8F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json               |   9 +-
 src/pages.json                      |  28 +++++-
 src/pages/index/index.vue           |   4 +-
 src/pages/my/index.vue              | 130 +--------------------------
 src/pages/throughout/index.vue      | 131 ++++++++++++++++++++++++++++
 src/static/tab-icons/extui.png      | Bin 0 -> 5094 bytes
 src/static/tab-icons/extuiHL.png    | Bin 0 -> 5089 bytes
 src/static/tab-icons/template.png   | Bin 0 -> 461 bytes
 src/static/tab-icons/templateHL.png | Bin 0 -> 459 bytes
 9 files changed, 166 insertions(+), 136 deletions(-)
 create mode 100644 src/pages/throughout/index.vue
 create mode 100644 src/static/tab-icons/extui.png
 create mode 100644 src/static/tab-icons/extuiHL.png
 create mode 100644 src/static/tab-icons/template.png
 create mode 100644 src/static/tab-icons/templateHL.png

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d44c4b7..b9f7917 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -29,5 +29,12 @@
     "pages.json": "jsonc", // pages.json 可以写注释
     "manifest.json": "jsonc" // manifest.json 可以写注释
   },
-  "cSpell.words": ["Tabbar"]
+  "cSpell.words": [
+    "commitlint",
+    "dcloudio",
+    "refresherrefresh",
+    "scrolltolower",
+    "tabbar",
+    "WechatMiniprogram"
+  ]
 }
diff --git a/src/pages.json b/src/pages.json
index b0f0bfa..fb319ad 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -7,13 +7,19 @@
       }
     },
     {
-      "path": "pages/my/index",
+      "path": "pages/throughout/index",
       "style": {
-        "navigationBarTitleText": "我的",
+        "navigationBarTitleText": "通屏+下拉刷新+自定义导航栏",
         "enablePullDownRefresh": true,
         "backgroundColor": "#23c09c", // 这个背景色要与页面的.top-section的背景图差不多，这样下拉刷新看起来才比较协调
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/my/index",
+      "style": {
+        "navigationBarTitleText": "我的"
+      }
     }
   ],
   "globalStyle": {
@@ -29,12 +35,26 @@
     }
   },
   "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#3cc51f",
+    "backgroundColor": "#ffffff",
+    "borderStyle": "black",
+    "height": "50px",
+    "fontSize": "10px",
+    "iconWidth": "24px",
+    "spacing": "3px",
     "list": [
       {
-        "pagePath": "pages/index/index"
+        "pagePath": "pages/index/index",
+        "iconPath": "static/tab-icons/extui.png",
+        "selectedIconPath": "static/tab-icons/extuiHL.png",
+        "text": "首页"
       },
       {
-        "pagePath": "pages/my/index"
+        "pagePath": "pages/throughout/index",
+        "iconPath": "static/tab-icons/template.png",
+        "selectedIconPath": "static/tab-icons/templateHL.png",
+        "text": "通屏"
       }
     ]
   },
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index e506977..b9c4255 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -17,8 +17,8 @@
     <!-- Sun in light mode, Moon in dark mode, from Carbon -->
     <button class="i-carbon-sun dark:i-carbon-moon text-green-300" />
     <fly-header></fly-header>
-    <navigator url="/pages/test1/index" open-type="navigate" hover-class="navigator-hover">
-      去二级页
+    <navigator url="/pages/my/index" open-type="navigate" hover-class="navigator-hover">
+      去我的
     </navigator>
   </view>
 </template>
diff --git a/src/pages/my/index.vue b/src/pages/my/index.vue
index 6d1136d..a37cabe 100644
--- a/src/pages/my/index.vue
+++ b/src/pages/my/index.vue
@@ -1,131 +1,3 @@
 <template>
-  <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
-    <!-- 1/3，多于1个页面，用返回图标 -->
-    <navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
-      <button class="i-carbon-chevron-left text-current"></button>
-    </navigator>
-    <!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
-    <!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
-    <navigator
-      v-else-if="!isTabbar"
-      open-type="switchTab"
-      url="/pages/index/index"
-      class="left-icon"
-    >
-      <button class="i-carbon-home text-current"></button>
-    </navigator>
-    <!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
-    <view class="title">{{ '我是标题' }}</view>
-  </view>
-  <scroll-view
-    enable-back-to-top
-    scroll-y
-    class="scroll-view-bg flex-1 h-full"
-    id="scroller"
-    refresher-enabled
-    @scrolltolower="onScrollToLower"
-    @refresherrefresh="onRefresherRefresh"
-    :refresher-triggered="isTriggered"
-  >
-    <view class="top-section" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
-      <view class="pt-1">顶部区域</view>
-      <view>可以是标题，也可以是个人中心头像等</view>
-      <view>建议本区域高度不低于200rpx</view>
-    </view>
-    <view class="p-2 leading-6 bg-white">
-      注意，上面的导航栏渐变效果仅微信端支持，且上面的导航栏无法抽为组件引入使用，否则滚动效果没有了。如果不只是微信小程序使用，可以
-      onPageScroll 实现全端效果一样，另外如果是app端，还可以配置 titleNView。参考
-      https://uniapp.dcloud.net.cn/tutorial/page.html#onpagescroll 。
-    </view>
-    <view class="bg-white">
-      <fly-content :line="30" />
-    </view>
-  </scroll-view>
+  <view>我的</view>
 </template>
-
-<script lang="ts" setup>
-import useNavbarWeixin from '@/hooks/useNavbarWeixin'
-import { onPullDownRefresh } from '@dcloudio/uni-app'
-
-const { pages, isTabbar, onScrollToLower, safeAreaInsets } = useNavbarWeixin()
-
-// 发现原生下拉刷新效果并不好，在微信里面只有顶部导航栏下拉才生效，页面区域下拉不生效，体验不好，结合自定义下拉刷新效果很好
-onPullDownRefresh(() => {
-  setTimeout(function fn() {
-    console.log('refresh - onPullDownRefresh')
-    // 关闭动画
-    uni.stopPullDownRefresh()
-  }, 1000)
-})
-
-// 当前下拉刷新状态
-const isTriggered = ref(false)
-// 自定义下拉刷新被触发
-const onRefresherRefresh = async () => {
-  // 开始动画
-  isTriggered.value = true
-  setTimeout(function fn() {
-    console.log('refresh - onRefresherRefresh')
-    // 关闭动画
-    isTriggered.value = false
-  }, 1000)
-}
-</script>
-
-<style lang="scss">
-page {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.scroll-view-bg {
-  // 这个背景色要与.top-section的背景图差不多，这样下拉刷新看起来才比较协调
-  background-color: #23c09c;
-}
-
-// 这个区域最好要大于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;
-}
-
-.fly-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  width: 750rpx;
-  color: #000;
-  background-color: transparent;
-
-  .left-icon {
-    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/throughout/index.vue b/src/pages/throughout/index.vue
new file mode 100644
index 0000000..6d1136d
--- /dev/null
+++ b/src/pages/throughout/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+    <!-- 1/3，多于1个页面，用返回图标 -->
+    <navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
+      <button class="i-carbon-chevron-left text-current"></button>
+    </navigator>
+    <!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
+    <!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
+    <navigator
+      v-else-if="!isTabbar"
+      open-type="switchTab"
+      url="/pages/index/index"
+      class="left-icon"
+    >
+      <button class="i-carbon-home text-current"></button>
+    </navigator>
+    <!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
+    <view class="title">{{ '我是标题' }}</view>
+  </view>
+  <scroll-view
+    enable-back-to-top
+    scroll-y
+    class="scroll-view-bg flex-1 h-full"
+    id="scroller"
+    refresher-enabled
+    @scrolltolower="onScrollToLower"
+    @refresherrefresh="onRefresherRefresh"
+    :refresher-triggered="isTriggered"
+  >
+    <view class="top-section" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+      <view class="pt-1">顶部区域</view>
+      <view>可以是标题，也可以是个人中心头像等</view>
+      <view>建议本区域高度不低于200rpx</view>
+    </view>
+    <view class="p-2 leading-6 bg-white">
+      注意，上面的导航栏渐变效果仅微信端支持，且上面的导航栏无法抽为组件引入使用，否则滚动效果没有了。如果不只是微信小程序使用，可以
+      onPageScroll 实现全端效果一样，另外如果是app端，还可以配置 titleNView。参考
+      https://uniapp.dcloud.net.cn/tutorial/page.html#onpagescroll 。
+    </view>
+    <view class="bg-white">
+      <fly-content :line="30" />
+    </view>
+  </scroll-view>
+</template>
+
+<script lang="ts" setup>
+import useNavbarWeixin from '@/hooks/useNavbarWeixin'
+import { onPullDownRefresh } from '@dcloudio/uni-app'
+
+const { pages, isTabbar, onScrollToLower, safeAreaInsets } = useNavbarWeixin()
+
+// 发现原生下拉刷新效果并不好，在微信里面只有顶部导航栏下拉才生效，页面区域下拉不生效，体验不好，结合自定义下拉刷新效果很好
+onPullDownRefresh(() => {
+  setTimeout(function fn() {
+    console.log('refresh - onPullDownRefresh')
+    // 关闭动画
+    uni.stopPullDownRefresh()
+  }, 1000)
+})
+
+// 当前下拉刷新状态
+const isTriggered = ref(false)
+// 自定义下拉刷新被触发
+const onRefresherRefresh = async () => {
+  // 开始动画
+  isTriggered.value = true
+  setTimeout(function fn() {
+    console.log('refresh - onRefresherRefresh')
+    // 关闭动画
+    isTriggered.value = false
+  }, 1000)
+}
+</script>
+
+<style lang="scss">
+page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.scroll-view-bg {
+  // 这个背景色要与.top-section的背景图差不多，这样下拉刷新看起来才比较协调
+  background-color: #23c09c;
+}
+
+// 这个区域最好要大于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;
+}
+
+.fly-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 750rpx;
+  color: #000;
+  background-color: transparent;
+
+  .left-icon {
+    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/static/tab-icons/extui.png b/src/static/tab-icons/extui.png
new file mode 100644
index 0000000000000000000000000000000000000000..7508e081600bbaeb09606c10add4f0ea4c22f285
GIT binary patch
literal 5094
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
Ktu;P>`F{YdkL|Sp

literal 0
HcmV?d00001

diff --git a/src/static/tab-icons/extuiHL.png b/src/static/tab-icons/extuiHL.png
new file mode 100644
index 0000000000000000000000000000000000000000..612b4999bc5bf8a9f880a5cbfeeaa1b0b19de2ad
GIT binary patch
literal 5089
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
B{r&&|

literal 0
HcmV?d00001

diff --git a/src/static/tab-icons/template.png b/src/static/tab-icons/template.png
new file mode 100644
index 0000000000000000000000000000000000000000..409ec9b92b041d306115335da13dfdc0f4ac257a
GIT binary patch
literal 461
zcmeAS@N?(olHy`uVBq!ia0vp^fgsGm1|(PYdzmpXFi!DwaSW-L^Y+$8FPT6I_m9Gc
znmWx*Qw25%<$RIVS?i;(WY?^nwNR**HC}P!mJg~yOFfnMH7;!xi&}HYtnp0E|HATX
zpPN@s%YR=mL%aGetLG#Y5c*|5e-@vN%zV4@LS<#P14r%Stl7Wqj`?%^WZ+{p<JdbV
z+>N7W)G};y{=Sj%joF-?Oz)gu=QDNZwrdN{Z-{UG8TeT@&9A|J;n#2tmlA7s3Bv;&
zjBY#zNezO`JrW5=8cwypEwolEPl{Z}^WE~%wH^5ndT(1U$QNYi`Cohe>D7q)N`5NJ
zY*1}4qK_0m*!g(%#(l1HJZkMW$}pKP{JtyACqAT>ZJ+ov_qAJR>}0NMzgEA7CtT?q
zqrG;wKlgt%wk?%H(R1~e&-91c%Am})rSrzun_Dl-7nU7VH(XGZv@`XG^XV4W1oba*
z@7D=^)Ze*wyH~&RuDM`W0@cGE?(p>RH?0E6UH$8I)AljGUifu?NSn6c^oG5s9=WEk
kzkXxqTvce${r$wmV(mNesoTV-z-VIdboFyt=akR{0L&M`%K!iX

literal 0
HcmV?d00001

diff --git a/src/static/tab-icons/templateHL.png b/src/static/tab-icons/templateHL.png
new file mode 100644
index 0000000000000000000000000000000000000000..4018448570ec27da1d0ab57496f094ffe028eab0
GIT binary patch
literal 459
zcmeAS@N?(olHy`uVBq!ia0vp^fgsGm1|(PYdzmpXFi!GxaSW-L^Y+$8ujoXH_K)hW
zvR2c?=5RGlp5Xd^;o{)Cu1B&Bl=y;X-D}!@!OE&a*iTRIk!;DE1<qD3iro(^-~XQ>
zQ(ITC?87r_n>qfUW;UpJP6DC5XBK=saxvx7!P+xYjQi(R=JLpt?fP}z@v)lxt{wf~
z(^eY%=D)#v_qch&{)cBQKbUX%XSU&1*$$zPj6Z^B%>TOc=o!rd*{J$vCztKT4T8))
z5(!5bl-VQ<4|FiP@vNx1F>kwYk@~c+rwZmP*UkUVYg1^={zdmu$IJcickPjS9et!V
z1+Kof+k#C^Hoo_(?jxsHpF5vQ?BLmZowfMaqAbZ9nrF`6$}ucvk7>QOe?3pQQXNZO
zxLCdRpV<-@o_Xe!?yEUnBZRPgf$x!Z=hxl+*Rh$|u9I=9@M+!4@=<CvjNhEze|@DT
zn13R7ucB?=i!wfgBs4cq<-hIxK&M20e$<&YjL{3fhHD+3+7aK_eCm;_z1;ep#n#^7
eQ1hJh>#2R`TAztbQ#C=+#^CAd=d#Wzp$P!7P{$Sk

literal 0
HcmV?d00001