guoyu/fronted_uniapp/components/custom-navbar/custom-navbar.vue

<template>
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="navbar-content">
            <!-- 返回按钮 -->
            <view class="navbar-left" @click="handleBack">
                <text class="back-icon">←</text>
            </view>
            
            <!-- 标题 -->
            <view class="navbar-center">
                <text class="navbar-title">{{ title }}</text>
            </view>
            
            <!-- 右侧操作区域（可选） -->
            <view class="navbar-right">
                <slot name="right"></slot>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'CustomNavbar',
    props: {
        title: {
            type: String,
            default: ''
        },
        showBack: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            statusBarHeight: 0
        }
    },
    mounted() {
        // 获取状态栏高度
        const systemInfo = uni.getSystemInfoSync()
        this.statusBarHeight = systemInfo.statusBarHeight || 0
    },
    methods: {
        handleBack() {
            if (this.showBack) {
                // 检查页面栈，如果只有一页，则返回首页
                const pages = getCurrentPages()
                if (pages.length <= 1) {
                    uni.switchTab({
                        url: '/pages/index/index'
                    })
                } else {
                    uni.navigateBack({
                        delta: 1
                    })
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1rpx solid #f0f0f0;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    .navbar-content {
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        
        @media (min-width: 768px) {
            height: 80rpx;
            padding: 0 40rpx;
        }
        
        .navbar-left {
            width: 60rpx;
            height: 60rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.2s;
            border-radius: 50%;
            
            @media (min-width: 768px) {
                width: 56rpx;
                height: 56rpx;
            }
            
            &:active {
                background-color: #f5f5f5;
            }
            
            .back-icon {
                font-size: 40rpx;
                color: #333;
                font-weight: bold;
                line-height: 1;
                
                @media (min-width: 768px) {
                    font-size: 36rpx;
                }
            }
        }
        
        .navbar-center {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 20rpx;
            
            .navbar-title {
                font-size: 36rpx;
                font-weight: 600;
                color: #1a1a1a;
                text-align: center;
                
                @media (min-width: 768px) {
                    font-size: 32rpx;
                }
            }
        }
        
        .navbar-right {
            width: 60rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            
            @media (min-width: 768px) {
                width: 56rpx;
            }
        }
    }
}
</style>