uniapp實現小程序自定義頭部組件

前言：小程序的頂部一般是原生控制的，類似下圖

 但類似電商，游戲類等小程序為求更加美觀，往往會自定義頭部展示，比如

功能實現：要自定義頭部樣式，得先配置全局屬性>>"navigationStyle": "custom",

 

 頭部組件：小程序自定義頭部的高度=狀態欄高度+導航欄高度，其中狀態欄高度不同手機規格會不同，需要適配，導航欄高度則是統一的44px，代碼如下

<template>
    <view class="bar-sticky">
        <view class="status-line" :style="{height: lineHeight, background: navigationBarStyle.background || normal.background}"></view>
        <view class="bar-line" :style="{background: navigationBarStyle.background || normal.background}">
            <view class="bar-line container-in" :style="{background: navigationBarStyle.background || normal.background}">
                <view class="bar-font bar-content" v-if="!custom">
                    <view class="icon-fanhui bar-back" :style="{color: navigationBarStyle.iconColor || normal.iconColor}" @click="$turnPage('1', 'navigateBack')"
                     v-if="showBack">
                    </view>
                    <view class="bar-title" :style="{color: navigationBarStyle.fontColor || normal.fontColor}">{{navigationBarStyle.iconText}}</view>
                </view>
                <view class="bar-font container-in" v-else>
                    <slot></slot>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            custom: {
                type: Boolean,
                default: false
            }, //自定義頭部，否則沿用原生的頭部樣式
            navigationBarStyle: {
                type: Object,
                default: function() {
                    return {
                        background: '#FFFFFF',
                        fontColor: '#000000',
                        iconColor: '#000000',
                        iconText: '一米一粉' //導航欄文字
                    }
                }
            }, //原生頭部自定義樣式
            showBack: {
                type: Boolean,
                default: true
            }, //是否顯示回退圖標，默認顯示
        },
        data() {
            return {
                normal: {
                    background: '#FFFFFF',
                    fontColor: '#000000',
                    iconColor: '#000000',
                }, //公用樣式,個性化樣式可通過傳值實現
                lineHeight: '' //狀態欄高度
            };
        },
        mounted() {
            const systemInfo = uni.getSystemInfoSync();
            // px轉換到rpx的比例
            let pxToRpxScale = 750 / systemInfo.windowWidth;
            let systems = {
                ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 狀態欄的高度
                navigationHeight: 44 * pxToRpxScale, // 導航欄的高度
                ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的寬度
                ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
                ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale, // 屏幕的高度
            }
            // 底部tabBar的高度
            systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems.ktxWindowHeight // 底部tabBar的高度
            this.lineHeight = systems.ktxStatusHeight + 'rpx';
            this.$emit('getHeight', systems)
        }
    }
</script>

<style lang="scss">
    /*正中*/
    .bar-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    //導航欄吸頂效果
    .bar-sticky {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 101;
    }

    /*垂直居中*/
    .container-in {
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        width: 100%;
        height: 44px;
    }

    .bar-line {
        height: 44px; //導航欄高度

        .bar-back {
            font-size: 52rpx !important;
            position: absolute;
            left: 30rpx;
        }

        .bar-title {
            font-size: 32rpx;
        }
    }
</style>

組件引用，如果想實現自定義的樣式，可以在規定高度內寫點自己的代碼

<view class="bar-sticky">
　　<navigationBar custom="true">
　　　　//自己的代碼
　　</navigationBar>
</view>

如果還是跟原來的樣式一樣，就寫

 

<view class="bar-sticky">
     <navigationBar :navigationBarStyle="navigationBarStyle" :showBack="false"></navigationBar>
</view>

//設置導航欄樣式
navigationBarStyle: {
　　iconText: '類目' //導航欄文字
},

注意：自定義的頭部組件需要固定在頂部，所以需要全局樣式，sticky的妙用有興趣可以留意一下

.bar-sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 101;
}