From afdeb88454e9ca6094bc80a439c30396e0bae99c Mon Sep 17 00:00:00 2001
From: mehaotian <490272692@qq.com>
Date: Thu, 14 Sep 2023 18:24:47 +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=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/uni-tabbar-light/uni-icons.css     |  17 +++
 .../uni-tabbar-light/uni-tabbar-light.uvue    | 110 ++++++++++++++++++
 .../uni-tabbar-light/uni-tabbar-light.vue     |  94 +++++++++++++++
 components/uni-tabbar-light/uniicons.ttf      | Bin 0 -> 1900 bytes
 pages.json                                    |   9 ++
 pages/tabBar/template.uvue                    |   7 ++
 pages/template/navbar-light/navbar-light.uvue |  49 ++++++++
 7 files changed, 286 insertions(+)
 create mode 100644 components/uni-tabbar-light/uni-icons.css
 create mode 100644 components/uni-tabbar-light/uni-tabbar-light.uvue
 create mode 100644 components/uni-tabbar-light/uni-tabbar-light.vue
 create mode 100644 components/uni-tabbar-light/uniicons.ttf
 create mode 100644 pages/template/navbar-light/navbar-light.uvue

diff --git a/components/uni-tabbar-light/uni-icons.css b/components/uni-tabbar-light/uni-icons.css
new file mode 100644
index 00000000..22c98b61
--- /dev/null
+++ b/components/uni-tabbar-light/uni-icons.css
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "UniIconsLight"; 
+  src: url('./uniicons.ttf') format('truetype');
+}
+
+.uni-icons {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.uniui-back:before {
+  content: "\e600";
+}
+
diff --git a/components/uni-tabbar-light/uni-tabbar-light.uvue b/components/uni-tabbar-light/uni-tabbar-light.uvue
new file mode 100644
index 00000000..11b102e3
--- /dev/null
+++ b/components/uni-tabbar-light/uni-tabbar-light.uvue
@@ -0,0 +1,110 @@
+<template>
+    <view class="uni-navbar">
+        <view class="uni-navbar-inner" :style="navbarStyle">
+            <view class="left-content" @click="back">
+                <text class="uni-icons">{{unicode}}</text>
+            </view>
+            <view class="uni-navbar-content">
+                <slot>{{title}}</slot>
+            </view>
+            <view class="right-content">
+                <slot name="right"></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import iconpath from './uniicons.ttf'
+    export default {
+        name: "uni-navbar",
+        props: {
+        	title: {
+        		type: String,
+        		default: ''
+        	},
+        	open: {
+        		type: Boolean,
+        		default: false
+        	},
+        	disabled: {
+        		type: Boolean,
+        		default: false
+        	}
+        },
+        data() {
+            return {
+                statusBarHeight: 0
+            };
+        },
+        computed: {
+            navbarStyle() : string {
+                return `margin-top:${this.statusBarHeight}px`
+            },
+            unicode() : string {
+                return '\ue600'
+            }
+        },
+        created() {
+            uni.loadFontFace({
+                global: false,
+                family: 'UniIconsFontFamily',
+                source: iconpath,
+                success() { },
+                fail(err) {
+                    console.log(err);
+                },
+            })
+
+            const sys = uni.getSystemInfoSync()
+            const statusBarHeight = sys.statusBarHeight
+            this.statusBarHeight = statusBarHeight
+        },
+        methods: {
+            back() {
+                uni.navigateBack({})
+            }
+        },
+    }
+</script>
+
+<style>
+    .uni-icons {
+        font-family: "UniIconsFontFamily" !important;
+        font-size: 22px;
+        font-style: normal;
+        color: #333;
+    }
+    .uni-navbar {
+        border: 1px #eee solid;
+        background-color: #fff;
+    }
+    .uni-navbar-inner {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        height: 45px;
+    }
+
+    .left-content,
+    .right-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 45px;
+        height: 100%;
+    }
+
+    .uni-navbar-content {
+        position: absolute;
+        height: 100%;
+        top: 0;
+        bottom: 0;
+        left: 45px;
+        right: 45px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
\ No newline at end of file
diff --git a/components/uni-tabbar-light/uni-tabbar-light.vue b/components/uni-tabbar-light/uni-tabbar-light.vue
new file mode 100644
index 00000000..5efd192f
--- /dev/null
+++ b/components/uni-tabbar-light/uni-tabbar-light.vue
@@ -0,0 +1,94 @@
+<template>
+    <view class="uni-navbar">
+        <view class="uni-navbar-inner" :style="navbarStyle">
+            <view class="left-content" @click="back">
+                <text class="uni-icons uniui-back"></text>
+            </view>
+            <view class="uni-navbar-content">
+                <slot>{{title}}</slot>
+            </view>
+            <view class="right-content">
+                <slot name="right"></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: "uni-navbar",
+        props: {
+            title: {
+                type: String,
+                default: ''
+            }
+        },
+        data() {
+            return {
+                statusBarHeight: 0
+            };
+        },
+        computed: {
+            navbarStyle() {
+                return `margin-top:${this.statusBarHeight}px`
+            },
+        },
+        created() {
+            const sys = uni.getSystemInfoSync()
+            const statusBarHeight = sys.statusBarHeight
+            this.statusBarHeight = statusBarHeight
+        },
+        methods: {
+            back() {
+                uni.navigateBack({})
+            }
+        },
+    }
+</script>
+
+<style>
+    @import './uni-icons.css';
+
+    .uni-icons {
+        font-family: UniIconsLight;
+        text-decoration: none;
+        text-align: center;
+        font-size: 22px;
+        font-style: normal;
+        color: #333;
+    }
+
+    .uni-navbar {
+        border: 1px #eee solid;
+        background-color: #fff;
+    }
+
+    .uni-navbar-inner {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        height: 45px;
+    }
+
+    .left-content,
+    .right-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 45px;
+        height: 100%;
+    }
+
+    .uni-navbar-content {
+        position: absolute;
+        height: 100%;
+        top: 0;
+        bottom: 0;
+        left: 45px;
+        right: 45px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
diff --git a/components/uni-tabbar-light/uniicons.ttf b/components/uni-tabbar-light/uniicons.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..e370efe839a69693e9ee79483f7bbca34f49dcfd
GIT binary patch
literal 1900
zcmd^A+iM(E9RAK+vL;)Tw23y@mqAPuwC<)0wKb$7#wHIfC`rw}6m)hnv%BqFmf1<^
zT9AMscxlaJAG8k|kb;UYJ_r_kstBP7h1Lfty+9k<zWQc%{m#r;nkM=ec$Ra{_xpa=
z^E)%M5CHO6hK`BZ`FGy1J{^4@5QoSfe`~&2ntJBwQOciDe$NT)#^B-K?*JM_@m1At
zdBwqb+Uh@$_`BxXi=#p958_*#uhdB7Zt5Qq|IGP9ElAD`6VUe&mtjA0Y<T#V{;QOC
z1ooMR*a?gJ5z1C*2kzk4Q;coUMyocWX7a^1=RW~*GE5n)U0?1j<AgzxR&-3k<HbxF
zvNOld|Mu>{)L+PFwztQ2%}KLt@2nZnPf>g-J(^U=NG67rEDzkrAJE~HL+bl5f!CnD
zIdkkd`h7bI@tiCo9a6s;3%_2q89(zB)Jd%%BhaH*!+=;}R%jn<Yvex9cJUA;K~D{)
zPWE5M+uo5y{BjTLXVZQ_{}anJlQldZnoPKLl43sIKCmxSi;D6)K~_fC$DJo9Z}7Ze
zwJZ~w%+_HyxVPlaAy1N>MWYW>2`T;G$BwiCud6n&EB6THl-*r#Wm7(9>wNR%l((^d
zHk;{%N!wu*FozG)8-cc}-Iezy#(Kp;p{>5!z9=dO+Sj%35468*UpypUly;pp{XU=S
zUSQN58XMgs%-oQM_O<B^QC?XQ<&Ej3OJe@PxR`8T8Gq3JPS&7&ObpO#_t?Rr*tyB~
z$MFkS%bNq-@Yc?aT;90;UvYXdv^l#-BMyk&xhLyrUrQsGuU;5`vLumD6I>oSC*KEP
z7j9-9AZBER<y$nQu!bD=D6ErzUSWec?Fzk2e(_3*?;(F!;Xb^CBMRpku_508gZ;x^
ze5kO%ATBAap&vgftdsv$VT1UF!X}=@eT93-Zz$Y{1@W}PdF&O=bnM!RyJ%HfR^5q0
zFA9_HKIc}Kd^_%n-F?B0oAoHP_7^6))T|r2aW_o!bhVTup5?_+V9hX|>-&+_h@+FP
zlN4%6(wHn3Wgf{FoG8FFVz{u8a9xCj3R+z2a1bHnr&_MbHhGTLRV=}$XS_|j)q8=~
zF`BfK(JbuegFUg$YnE1FYPq$VCQdV3iFG8b$l{C{DIl6r^|`FXC$@NjQg@PZ99kDp
zOT8MHM3KMldAjz6^qfKV_r^<4zxQ(AI!vJnT^PdT_syu-&Z*vJV#hCgb>Ht#QO)+f
MRLm59J#-o4AImB(hX4Qo

literal 0
HcmV?d00001

diff --git a/pages.json b/pages.json
index 6e3bf2f4..40460d47 100644
--- a/pages.json
+++ b/pages.json
@@ -909,6 +909,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/template/navbar-light/navbar-light",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "自定义导航栏",
+                "navigationStyle": "custom"
+            }
+            
+        }
     ],
   "globalStyle": {
     "pageOrientation": "portrait",
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index 74221cef..1c337f61 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -159,6 +159,13 @@ export default {
           name: '划走式卡片',
           open: false,
           pages: [] as Page[],
+        },
+        {
+          id: 'navbar-light',
+          url: 'navbar-light',
+          name: '自定义导航栏',
+          open: false,
+          pages: [] as Page[],
         },
         {
           id: 'calendar',
diff --git a/pages/template/navbar-light/navbar-light.uvue b/pages/template/navbar-light/navbar-light.uvue
new file mode 100644
index 00000000..f7a80352
--- /dev/null
+++ b/pages/template/navbar-light/navbar-light.uvue
@@ -0,0 +1,49 @@
+<template>
+  <view class="content">
+    <uni-tabbar-light :title="title"></uni-tabbar-light>
+    <scroll-view class="scroll-view" scroll-y="true">
+      <view class="content-item" v-for="item in 100">
+        <text class="text">内容：{{item+1}}</text>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: 'Hello uni-app'
+      }
+    },
+    onLoad() {},
+    methods: {}
+  }
+</script>
+
+<style>
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .scroll-view {
+    flex: 1;
+    background-color: #f5f5f5;
+    padding: 5px 0;
+  }
+
+  .content-item {
+    padding: 15px;
+    margin: 5px 10px;
+    background-color: #fff;
+    border-radius: 5px;
+
+  }
+
+  .text {
+    font-size: 14px;
+    color: #666;
+  }
+</style>
-- 
GitLab