yinchuan-community-all/mini-program/smart-city-yinchuan-wx/comps/dt_custom_bar.vue

<template>
    <view>
        <view :style="{ background: background }" class="custom-header-container">
            <view :style="{height:getStausBarHeight + 'px'}" class="custom-header-status-bar"></view>
            <view :class="{'ios-center': isIos }" class="custom-header-top-container">
                <view :style="{color: color}" :class="{isIos: isIos}" class="custom-back-btn iconfont" v-if="showBack"
                      @tap="backTap">
                    <image v-if="color!='#ffffff'"
                           src="https://szsq.nxzhsq.cn/community/miniofile/image/ic_back_black.png" mode="widthFix"
                           style="width: 20px;"></image>
                    <image v-if="color=='#ffffff'"
                           src="https://szsq.nxzhsq.cn/community/miniofile/image/ic_back_white.png" mode="widthFix"
                           style="width: 20px;"></image>
                </view>
                <view :style="{color: color}"
                      :class="[{'ios-center': isIos },{'android-left-30':!isIos&&!showBack},{'android-left-80':!isIos&&showBack}]"
                      class="custom-header-title">{{ title }}
                </view>
            </view>
        </view>
        <view :style="{ height: getStausBarHeight + (isIos ? 45 : 48) + 'px' }" class="custom-header-height"></view>
    </view>
</template>
<script>
    export default {
        props: {
            title: {
                type: String,
                default: ''
            },
            background: {
                type: String,
                default: 'transparent'
            },
            color: {
                type: String,
                default: '#ffffff'
            },
            showBack: {
                type: Boolean,
                default: false
            },
        },
        computed: {
            getStausBarHeight() {
                try {
                    const res = uni.getSystemInfoSync();
                    return res.statusBarHeight;
                } catch (e) {
                }
            },
            isIos() {
                return uni.getSystemInfoSync().system.indexOf('iOS') > -1
            }
        },
        methods: {
            backTap() {
                uni.navigateBack({
                    delta: 1
                })
            }
        }
    }
</script>
<style scoped lang="scss">
    .custom-header-top-container {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        width: 100%;
        align-items: center;

        &.ios-center {
            justify-content: center;
        }
    }

    .custom-header-container {
        z-index: 9;
        width: 750 upx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0;
    }

    .custom-back-btn {
        height: 48px;
        line-height: 48px;
        width: 40px;
        margin: 0;
        padding: 0;
        border-radius: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0 upx;
        font-size: 18px;
        border-radius: 5px;
        font-weight: 500;
        color: #FFFFFF;

        &:active {
            background: #0D72DF;
        }

        &.isIos {
            line-height: 45px;
            height: 45px;
        }
    }

    .custom-header-status-bar {
        width: 100%;
        top: 0;
        position: sticky;
        z-index: 100;
    }

    .custom-header-title {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        color: #FFFFFF;

        &.ios-center {
            margin-left: 0;
            line-height: 45px;
            height: 45px;
        }

        &.android-left-30 {
            margin-left: 30 upx;
        }

        &.android-left-80 {
            margin-left: 80 upx;
        }

    }
</style>