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>
|