duantuihe/components/navBar/index.vue

<template>
	<view class="navbar" :style="{height:statusBarHeight+navBareight +'px',background}"> <!-- 如若不写 高度始终为44 没有找到原因 -->
		<view class="narbar-flexd" :style="[{background}]">
			<view :style=" {height:statusBarHeight+'px'}"></view>
			<view class="narbar-content" :style="{height:navBareight+'px','justify-content':flex=='cen'?'center':''}">

				<!-- 左侧返回按钮 -->
				<view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop}]">
					<uni-icons type="arrowleft" size="25" :color='color'></uni-icons>
				</view>
				<view class="left" @click="" v-if="!back&&navImg">
					<image :showLoading="true" mode="heightFix" :src="navImg"
						style="width:40rpx;height:60rpx;margin-right: 8rpx;" @click="">
					</image>
				</view>
				<view class="title" :style="[{color}]" v-if="title">
					{{title.replace('true','')}}
				</view>
			</view>
		</view>
		<view class="navHeight" :style="{height:statusBarHeight+navBareight +'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				navBareight: 45,
				windowWidth: 375,
			};
		},
		props: {
			backType: { // 标题文字(默认为空)
				type: String,
				default: ''
			},
			navImg: { // 标题文字(默认为空)
				type: String,
				default: ''
			},
			flex: { // 标题文字(默认为空)
				type: String,
				default: 'left'
			},
			title: { // 标题文字(默认为空)
				type: String,
				default: ' '
			},
			color: { // 标题和返回按钮颜色(默认白色)
				type: String,
				default: '#fff'
			},
			//建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
			background: { // 背景颜色(不传值默认透明)
				type: String,
				default: 'transparent'
			},
			back: { // 是否显示返回按钮(不传值默认不显示)
				type: Boolean,
				default: false
			},
			backHome: { // 是否显示返回按钮(不传值默认不显示)
				type: Boolean,
				default: false
			},

		},

		created() {
			//获取手机系统信息 -- 状态栏高度
			let {
				statusBarHeight,
				windowWidth
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.windowWidth = windowWidth
			//去除
			//#ifndef H5 || MP-ALIPAY ||APP-PLUS
			//获取小程序胶囊的高度
			let {
				top,
				bottom,
				left
			} = uni.getMenuButtonBoundingClientRect()
			//高度 =（胶囊底部高低-状态栏高度）+（胶囊顶部高度-状态栏内的高度）
			this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight)
			this.windowWidth = left
			//#endif
		},

		methods: {
			// 左侧返回按钮调用
			onBack() {
				if (this.backType) {
					uni.switchTab({
						url: '/pages/index'
					})
				} else {
					this.$emit("onBack");
					uni.navigateBack({
						delta: 1, //返回层数，2则上上页
					})
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>