jobslink-user-clent/components/CustomNavbar/navbar.vue

<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() {
            // #ifdef MP-WEIXIN
            let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
            const { top, width, height, right } = menuButtonInfo
            console.log(top)
            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
                }
            })
            // #endif
        },
        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>