106 lines
2.0 KiB
Plaintext
106 lines
2.0 KiB
Plaintext
<template>
|
|
<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|
<view class="nav-content" :style="{ height: navBarHeight + 'px' }">
|
|
<!-- 左侧返回按钮 -->
|
|
<view class="nav-left" v-if="showBack" @click="handleBack">
|
|
<text class="nav-back-icon">←</text>
|
|
</view>
|
|
<view class="nav-left" v-else></view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="nav-center">
|
|
<text class="nav-title" :style="{ color: titleColor }">{{ title }}</text>
|
|
</view>
|
|
|
|
<!-- 右侧插槽 -->
|
|
<view class="nav-right">
|
|
<slot name="right"></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 占位高度 -->
|
|
<view :style="{ height: (statusBarHeight + navBarHeight) + 'px' }"></view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
const props = defineProps<{
|
|
title ?: string
|
|
showBack ?: boolean
|
|
titleColor ?: string
|
|
bgColor ?: string
|
|
}>()
|
|
|
|
// 状态栏高度
|
|
const statusBarHeight = ref(20)
|
|
// 导航栏高度
|
|
const navBarHeight = ref(44)
|
|
|
|
onMounted(() => {
|
|
const sysInfo = uni.getSystemInfoSync()
|
|
statusBarHeight.value = sysInfo.statusBarHeight
|
|
// #ifdef MP-WEIXIN
|
|
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
navBarHeight.value = (menuButtonInfo.top - sysInfo.statusBarHeight) * 2 + menuButtonInfo.height
|
|
// #endif
|
|
})
|
|
|
|
const handleBack = () => {
|
|
uni.navigateBack({
|
|
fail: () => {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nav-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
z-index: 999;
|
|
}
|
|
|
|
.nav-content {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.nav-left {
|
|
width: 80rpx;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-back-icon {
|
|
font-size: 40rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.nav-center {
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.nav-right {
|
|
width: 80rpx;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|