139 lines
2.8 KiB
Vue
139 lines
2.8 KiB
Vue
<template>
|
||
<view
|
||
class="custom-navbar"
|
||
:style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
|
||
>
|
||
<view class="nav-content">
|
||
<!-- 左侧返回 -->
|
||
<view class="nav-left">
|
||
<u-icon name="arrow-left" size="44" color="#333" @click="onBack"></u-icon>
|
||
<u-icon name="home" size="44" color="#333" @click="goHome"></u-icon>
|
||
</view>
|
||
|
||
<!-- 中间标题 -->
|
||
<view class="nav-title">{{ title }}</view>
|
||
|
||
<!-- 右侧按钮（位于胶囊左侧） -->
|
||
<view
|
||
class="nav-right"
|
||
:style="{ marginRight: menuRightGap + 'px' }"
|
||
>
|
||
<view
|
||
v-for="(btn, index) in rightButtons"
|
||
:key="index"
|
||
class="nav-btn"
|
||
@click="btn.onClick && btn.onClick()"
|
||
>
|
||
<u-icon
|
||
:name="btn.icon"
|
||
:color="btn.color || '#333'"
|
||
:size="btn.size || 40"
|
||
></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'customNavbar',
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
rightButtons: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
back: {
|
||
type: Function,
|
||
default: null,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight: 0,
|
||
navHeight: 0,
|
||
menuRightGap: 0, // 胶囊按钮与右侧边距
|
||
};
|
||
},
|
||
mounted() {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const menuButton = wx.getMenuButtonBoundingClientRect
|
||
? wx.getMenuButtonBoundingClientRect()
|
||
: null;
|
||
|
||
if (menuButton) {
|
||
this.statusBarHeight = systemInfo.statusBarHeight;
|
||
this.navHeight =
|
||
menuButton.bottom + menuButton.top - systemInfo.statusBarHeight;
|
||
this.menuRightGap =
|
||
systemInfo.screenWidth - menuButton.right + 8; // 适度留一点间隙
|
||
} else {
|
||
// 其他端
|
||
this.statusBarHeight = systemInfo.statusBarHeight;
|
||
this.navHeight = 90;
|
||
this.menuRightGap = 16;
|
||
}
|
||
},
|
||
methods: {
|
||
onBack() {
|
||
if (this.back) {
|
||
this.back();
|
||
} else {
|
||
uni.navigateBack();
|
||
}
|
||
},
|
||
goHome(){
|
||
uni.reLaunch({
|
||
url:'../index/index'
|
||
})
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||
z-index: 999;
|
||
|
||
.nav-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.nav-left {
|
||
width: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.nav-right {
|
||
display: flex;
|
||
align-items: center;
|
||
.nav-btn {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|