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 {
         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;
         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;
}