uni-navbar-lite.vue 2.2 KB
Newer Older
M
mehaotian 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 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>