手机端自定义导航栏自适应样式

<template>
    <view :style="{height:boxHeight,lineHeight:boxHeight}" class="nav-outer-box">
        <i class="uni-btn-icon nav-left" 
            @click="onClickLeft(title)"></i>
        <view class="nav-title">
            {{ title }}
        </view>
        <view class="nav-right">
           
            <u-icon v-if='showAdd' name="plus-circle" color="#FFF" size="32" 
                @click="clickBtn('newAdd')"></u-icon>
           
        </view>
    </view>
</template>

<script>
    export default {
        components: {},
        props: {
            title: {
                type: String,
                default: ''
            },
            showCallback: {
                type: Boolean,
                default: false
            },
            leftText: {
                type: String,
                default: ''
            },
            rightText: {
                type: String,
                default: ''
            },
            showAdd: {
                type: Boolean,
                default: false
            },
            showList: {
                type: Boolean,
                default: false
            },
            showOut: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                boxtop: '',
                boxHeight: '', //导航栏高度
                titleHeight: 0, //状态栏和导航栏的总高度
                statusBarHeight: 0, //状态栏高度
            }
        },
        created() {
            const res = uni.getSystemInfoSync()
            const system = res.platform
            console.log("system", system, res.statusBarHeight);
            this.statusBarHeight = res.statusBarHeight
            if (system === 'android') {
                this.titleHeight = (48 + this.statusBarHeight)
            } else if (system === 'ios') {
                this.titleHeight = (44 + this.statusBarHeight)
            } else {
                this.titleHeight = 44
            }
            this.boxHeight = this.titleHeight + 'px'

        },