在使用uniapp寫小程序時經(jīng)常需要自定義導(dǎo)航條，Android系統(tǒng)和iOS系統(tǒng)導(dǎo)航條的高度是不同的，瀏覽借鑒了網(wǎng)上的一些文章的相關(guān)方法自己寫了一個自定義nabbar的組件，通過slot可在父組件自定義導(dǎo)航欄的內(nèi)容。

引入和使用nabbar組件

<template>
    <view>
        <view-nabbar>
            <slot-one>
               //自定義nabbar內(nèi)容
            </slot-one>
        </view-nabbar>
    </view>
</template>

<script>
    import Nabbar from '@/components/nabbar.vue';
    export default {
        components: {
            'view-nabbar': Nabbar,
        }
    }
</script>

<style lang="scss">
</style>

nabbar組件

<template>
    <view class="nabbar" :style="{'height': statusBarHeight + barHeight + 'px'}">
         //手機狀態(tài)欄
        <view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view> 
        //導(dǎo)航欄
        <view class="nabbar-box" :style="{ 'top': statusBarHeight+ 'px', 'heigth': barHeight + 'px' }">
            <view class="nabbar-cont" :style="{ width: barWidth +'px' }">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBarHeight: 20,
                barHeight: 44,
                barWidth: null,
            };
        },
        mounted() {
            let that = this;
                        //通過uni自帶api獲取手機系統(tǒng)信息
            uni.getSystemInfo({
                success: function (res) {
                    // console.log(res)
                    that.statusBarHeight = res.statusBarHeight;      //手機狀態(tài)欄高度
                    let isiOS = res.system.indexOf('iOS') > -1;    //是否為iOS系統(tǒng)
                    that.barHeight = !isiOS? 48: 44;    //導(dǎo)航欄高度，iOS：48，Android：44
                    that.barWidth = res.windowWidth - 87;     //nabbar可操作寬度 = 屏幕寬度 - 小程序右上角的膠囊寬度（87）
                }
            })
        },
    }
</script>

<style lang="scss">
    .nabbar{
        width: 100%;
    }
    .status-bar{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: #FFFFFF;
        // height: var(--status-bar-height);
        z-index: 999;
    }
    .nabbar-box{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 88rpx;
        background-color: #ffffff;
        padding: 0 16rpx;
        z-index: 999;
        .nabbar-cont{
            height: 100%;
            display: flex;
            align-items: center;
        }
    }
</style>