102 lines
1.8 KiB
Vue
102 lines
1.8 KiB
Vue
<template>
|
|
<view class="custom-navbar" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }">
|
|
<view class="navbar-content" :style="{ height: contentHeight + 'px' }">
|
|
<view class="navbar-left" @click="handleBack" v-if="showBack">
|
|
<text class="back-icon"></text>
|
|
</view>
|
|
<view class="navbar-title">{{ title }}</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
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: '#C93639'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
contentHeight: 44,
|
|
navHeight: 0
|
|
};
|
|
},
|
|
mounted() {
|
|
// 获取状态栏高度
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
this.statusBarHeight = systemInfo.statusBarHeight;
|
|
this.navHeight = this.statusBarHeight + this.contentHeight;
|
|
},
|
|
methods: {
|
|
handleBack() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-navbar {
|
|
width: 100%;
|
|
background-color: #C93639;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.navbar-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.navbar-left {
|
|
width: 60rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.back-icon {
|
|
font-size: 44rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.navbar-title {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.navbar-right {
|
|
width: 60rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|