flat: 新页面

components/CustomNavbar/navbar.vue

@@ -0,0 +1,75 @@
+<template>
+    <view class="navbar" :style="{height: _data.navHeight+'px'}">
+        <view class="back" @tap="back">
+            <uni-icons type="back" size="26" color="#FFFFFF"></uni-icons>
+        </view>
+        <view class="title">
+            {{titke}}
+        </view>
+        <view class="ri">
+            
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name:"navbar",
+        data() {
+            return {
+                _data: {},
+            };
+        },
+        props: {
+        	titke: {
+        		type: String,
+        		required: false,
+        		default: '',
+        	}
+        },
+        created() {
+            let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+            const { top, width, height, right } = menuButtonInfo
+            const that = this
+            uni.getSystemInfo({
+                success: function (res) {
+                const { statusBarHeight } = res
+                const margin = top - statusBarHeight
+                that._data.navHeight = (height + statusBarHeight + (margin * 2))
+                that._data.statusBarHeight = statusBarHeight
+                that._data.searchMarginTop = statusBarHeight + margin
+                that._data.searchHeight = height
+                that._data.searchWidth= right - width - 30
+                }
+            })
+        },
+        methods: {
+            back() {
+                this.$emit('back')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+.navbar{
+    position: sticky;
+    top: 0;
+    z-index: 9999;
+    padding-bottom: 8rpx;
+    width: 100%;
+    background-color: #4071f8;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    .back,.ri{
+        padding: 10rpx;
+        width: 50rpx;
+    }
+    .title{
+        line-height: 78rpx;
+        font-size: 28rpx;
+        color: #FFFFFF;
+    }
+}
+</style>