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>