141 lines
3.4 KiB
Vue
141 lines
3.4 KiB
Vue
<template>
|
||
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||
<view class="navbar-content">
|
||
<!-- 返回按钮 -->
|
||
<view class="navbar-left" @click="handleBack">
|
||
<u-icon name="arrow-left" color="#333" size="20"></u-icon>
|
||
</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;
|
||
}
|
||
}
|
||
|
||
.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>
|
||
|