feat: 自定义导航栏组件

components/uni-tabbar-light/uni-icons.css

+@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";
+}
+

components/uni-tabbar-light/uni-tabbar-light.uvue

+<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

components/uni-tabbar-light/uni-tabbar-light.vue

+<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>

pages.json

@@ -909,6 +909,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/template/navbar-light/navbar-light",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "自定义导航栏",
+                "navigationStyle": "custom"
+            }
+            
+        }
     ],
   "globalStyle": {
     "pageOrientation": "portrait",

pages/tabBar/template.uvue

@@ -160,6 +160,13 @@ export default {
           open: false,
           pages: [] as Page[],
         },
+        {
+          id: 'navbar-light',
+          url: 'navbar-light',
+          name: '自定义导航栏',
+          open: false,
+          pages: [] as Page[],
+        },
         {
           id: 'calendar',
           url: 'calendar',

pages/template/navbar-light/navbar-light.uvue

+<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>