126 lines
2.5 KiB
Vue
126 lines
2.5 KiB
Vue
<template>
|
||
<view
|
||
class="custom-nav-bar"
|
||
:style="{ height: navBarHeight + 'px', background: bgcolor }"
|
||
>
|
||
<!-- 状态栏占位 -->
|
||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||
|
||
<!-- 导航栏内容 -->
|
||
<view class="nav-bar-content" :style="{ height: navBarContentHeight + 'px' }">
|
||
<!-- 左侧返回按钮 -->
|
||
<view class="nav-bar-left" v-if="showBackButton">
|
||
<view class="back-button" @click="goBack">
|
||
<uni-icons type="back" size="24" color="#000"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 中间标题 -->
|
||
<view class="nav-bar-center">
|
||
<text class="nav-titles">{{ title }}</text>
|
||
</view>
|
||
|
||
<!-- 右侧插槽 -->
|
||
<view class="nav-bar-right">
|
||
<slot name="right"></slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'CustomNavBar',
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: '标题'
|
||
},
|
||
showBackButton: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
bgcolor: {
|
||
type: String,
|
||
default: '#FFFFFF'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight: 0, // 状态栏高度
|
||
navBarHeight: 0, // 导航栏总高度（状态栏 + 导航栏内容）
|
||
navBarContentHeight: 44 // 导航栏内容高度（默认 44px）
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getSystemInfo();
|
||
},
|
||
methods: {
|
||
// 获取系统信息
|
||
getSystemInfo() {
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
this.statusBarHeight = res.statusBarHeight; // 获取状态栏高度
|
||
this.navBarHeight = this.statusBarHeight + this.navBarContentHeight; // 计算导航栏总高度
|
||
// 将 navBarHeight 传递给父组件
|
||
this.$emit('updateHeight', this.navBarHeight);
|
||
}
|
||
});
|
||
},
|
||
// 返回上一页
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.custom-nav-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.status-bar {
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-bar-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.nav-bar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.back-button {
|
||
padding: 8px;
|
||
}
|
||
|
||
.nav-bar-center {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-titles {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #FFF;
|
||
}
|
||
|
||
.nav-bar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style> |