uni-app自定义导航栏问题

引用插件：uniNavBar

<uni-nav-bar statusBar="true" backgroundColor="#59AAFE" color="#FFFFFF" class="status-bar">
            <view slot="left">分类</view>
            <view>课程</view>
            <view slot="right"></view>
        </uni-nav-bar>

存在问题：

1. 给插件标签上定义css改变前、背景色是不行的。需要使用backgroundColor，color属性。

2. 非具名插槽，默认中间显示的文字，不居中，可以用flex布局，让左中右三个插槽平分，并让text剧中

3. 关于uni-nav-bar的height问题，从源码中看，他先定义了一个$nav-height: 44px;变量。

然后，如果定义statusBar=true，则又加入一个占位的组件

1	`<uni-status-bar` `v-if="statusBar" />`

　跟踪这个组件的源码，发现里面放了一个空的view，高度为系统statusBarHeight，又写死了一个样式，高度是20px，style属于element级别，应该高于类吧。所以这个高度应该就是20px了。

<template>
    <view :style="{ height: statusBarHeight }" class="uni-status-bar">
        <slot />
    </view>
</template>
 
<script>
    var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
    export default {
        name: 'UniStatusBar',
        data() {
            return {
                statusBarHeight: statusBarHeight
            }
        }
    }
</script>
 
<style lang="scss" scoped>
    .uni-status-bar {
        width: 750rpx;
        height: 20px;
        // height: var(--status-bar-height);
    }
</style>

那问题就来了，如果下面再放一个fix的组件，怎么把这个高度减去呢?44+20=64px。

我这里引用了一个mescroll的插件。

<mescroll-uni
            class="jp-course-list" 
            ref="mescrollRef" 
            @init="mescrollInit" 
            @down="downCallback" 
            @up="upCallback" 
            :down="downOption" 
            :up="upOption"
            :topbar="true"
            :top="74"
        >