great_distribution/components/customNavbar/customNavbar.vue

<template>
	<view class="custom-navbar" :style="{'background':bgColor,'height':`${(statusBar + customBarH) * 2}rpx`}">
		<view class="custom-navbar-info" :style="{'background':bgColor,'position':isFixed?'fixed':'static',...customNavbarInfo }">
			<!-- 系统导航栏 -->
			<view class="system" :style="{'height':`${statusBar * 2}rpx`}"></view>
			<view class="navbar" :style="{'height':`${customBarH * 2}rpx`}">
				<view class="left" :style="{...leftStyle}">
					<!-- 通过具名插槽来自定义导航栏左侧内通 -->
					<slot name="left">
						<!-- 这里我就直接用文本代替了，返回图标大家自行替换哈 -->
						<!-- #ifdef APP-PLUS || H5 -->
						<view v-if="isLeft" @click="back()">
							<u-icon name="arrow-left" color="unset"></u-icon>
							{{ leftText }}
						</view>
						<!-- #endif -->
						<!-- 这里考虑到微信小程序分享的页面，在页面中不存在上一页面时，直接返回首页。-->
						<!-- #ifdef MP-WEIXIN -->
						<view @click="back()" v-if="isPageUp && isPageUp">返回</view>
						<view @click="homePage()" v-if="!isPageUp && isPageUp">首页</view>
						<!-- #endif -->
					</slot>
				</view>
				<!-- 通过具名插槽来自定义导航栏中间内通 -->
				<view class="content" :style="contentStyle">
					<slot name="content">{{ title }}</slot>
				</view>
				<!-- 通过具名插槽来自定义导航栏右侧内通 -->
				<view class="right">
					<slot name="right">
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				statusBar: 0, // 状态栏
				customBarH: this.customBar, // 状态栏 
				platform: "", // 平台
				isPageUp: true, // 是否返回上一页（微信小程序）
			}
		},
		props: {
			//  主体样式 
			customNavbarInfo: {
				type: Object,
				default: ()=>{
					return {
						borderBottom: '1px solid #ebebeb',
						boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 6px 0px'
					}
				}
			},
			// 状态栏 
			customBar: {
				type: Number,
				default: 45
			}, 
			isLeft: {
				type: Boolean,
				default: true
			},
			//  主体样式
			leftStyle: {
				type: Object,
				default: ()=>{
					return {
						color: '#000'
					}
				}
			},
			// 自定义左侧文字
			leftText: {
				type: String,
				default: ""
			},
			// 标题名称
			title: {
				type: String,
				default: ""
			},
			// 标题名称样式
			contentStyle: {
				type: Object,
				default: ()=>{
					return {
						color: '#fff'
					}
				}
			},
			// 自定义右侧文字
			rightText: {
				type: String,
				default: ""
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: "#fff"
			},
			// 是否固定顶部
			isFixed: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			/*
				这里通过 uni.getSystemInfo 获取系统信息
				用来计算系统导航栏高度和导航栏高度
			*/
			uni.getSystemInfo({
				success: (res) => {
					this.platform = res.platform
					// #ifdef MP
					this.statusBar = res.statusBarHeight
					const custom = wx.getMenuButtonBoundingClientRect()
					this.customBarH = custom.bottom + custom.top - res.statusBarHeight
					// #endif
					// #ifdef APP-PLUS
					this.statusBar = res.statusBarHeight
					// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
					if (res.platform == "android") {
						this.statusBar += 3
						this.customBarH += 3
					}
					// #endif 
				}
			})
			// getCurrentPages 官方解释用于获取当前页面的实例  官方地址：https://uniapp.dcloud.net.cn/uni-app-x/api/get-current-pages.html#getcurrentpages
			let pages = getCurrentPages()
			if (pages[pages.length - 2]) {
				this.isPageUp = true
			} else {
				this.isPageUp = false
			}
		},
		methods: {
			// 返回上一页面
			back() {
				console.log("返回上一页！")
				uni.navigateBack({
					delta: 1
				})
			},
			// 微信小程序返回首页
			homePage() {
				console.log("返回首页！")
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.custom-navbar {
		width: 100vw;
		color: #fff;
		.custom-navbar-info {
			width: 100%;
			z-index: 9999;
			.system {
				width: 100%;
				background: transparent;
			}
			
			.navbar {
				width: 100vw;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				position: relative;
				padding: 0 30rpx;
			}
			
			.left,
			.right {
				width: 120rpx;
			}
			
			.left {
				text-align: left;
				font-size: 32rpx;
				>view {
					display: flex;
				}
			}
			
			.content {
				text-align: center;
				font-size: 32rpx;
			}
			
			.right {
				text-align: right;
			}
		}
	}
</style>