qianshanxm_ui/partybuilding-wx/components/navbar/navbar.vue

<template>
	<view class="ua__navbar">
		<view class="ua__navbar-wrap" :class="{'custom': custom, 'fixed': fixed || transparent}"
			:style="{'height': customBarH + 'px', 'padding-top': (custom ? statusBarH : 0) + 'px', 'background': bgcolor, 'color': color, 'z-index': zIndex}">
			<!-- //左侧 (返回) -->
			<view class="action navbar-action__left" v-if="back && back!='false'" @click="onBack">
				<template v-if="$slots.back">
					<slot name="back" />
				</template>
				<template v-else>
					<view class="navbar-back"><image src="@/static/images/icon_zt_back.png"></image></view>
					
				</template>
				<slot name="backText" />
			</view>
			<slot name="left" />

			<!-- //标题 -->
			<view v-if="!search" class="navbar-title" :class="{'center': center}">
				<template v-if="$slots.title">
					<slot name="title" />
				</template>
				<template v-else><text :style="{'color': color}">{{title}}</text></template>
			</view>

			<!-- //搜索框 -->
			<view v-if="search" class="action navbar-action__search">
				<slot name="search" />
			</view>

			<!-- //右侧 -->
			<view class="action navbar-action__right">
				<slot name="right" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否采用自定义导航模式
			custom: {
				type: [Boolean, String],
				default: false
			},
			// 是否返回
			back: {
				type: [Boolean, String],
				default: true
			},
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 标题颜色
			color: {
				type: String,
				default: '#353535'
			},
			// 背景色
			bgcolor: {
				type: String,
				default: '#fff'
			},
			// 标题是否居中
			center: {
				type: [Boolean, String],
				default: false
			},
			// 搜索框
			search: {
				type: [Boolean, String],
				default: false
			},
			// 是否固定导航
			fixed: {
				type: [Boolean, String],
				default: false
			},
			// 是否背景透明
			transparent: {
				type: [Boolean, String],
				default: false
			},
			// 设置层叠
			zIndex: {
				type: [Number, String],
				default: '2022'
			},
		},
		data() {
			return {
				// 全局设置状态栏和导航栏高度
				statusBarH: 0,
				customBarH: 0,
			}
		},
		mounted() {
			// console.log(this.bgcolor)
			var that = this;
			// console.log(that.$http._GET.customBarH)
			// console.log(that.$http._GET.statusBarH)
			if(that.$http._GET.customBarH!=0){
				that.statusBarH = that.$http._GET.statusBarH
				// 状态栏
				that.customBarH = that.$http._GET.customBarH
			}else{
			uni.getSystemInfo({
				success(e) {
					// console.log(e)
					// 获取手机状态栏高度
					let statusBar = e.statusBarHeight
					let customBar

					// #ifndef MP
					customBar = statusBar + (e.platform == 'android' ? 50 : 45)
					// #endif

					// #ifdef MP-WEIXIN
					// 获取胶囊按钮的布局位置信息
					let menu = wx.getMenuButtonBoundingClientRect()
					// 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度
					customBar = menu.bottom + menu.top - statusBar
					// #endif

					// #ifdef MP-ALIPAY
					customBar = statusBar + e.titleBarHeight
					// #endif
					// console.log(statusBar,customBar)
					// 导航栏
					that.statusBarH = statusBar
					// 状态栏
					that.customBarH = that.custom ? customBar : customBar - statusBar
					that.$http._GET.customBarH=that.customBarH;
					that.$http._GET.statusBarH=that.statusBarH;
					that.$emit('getTop',that.customBarH)
				},

			})
			}
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ua__navbar-wrap{box-sizing: border-box;display: flex;align-items: center;}
	.ua__navbar-wrap.fixed{position: fixed;left: 0;top: 0;right: 0;}
	.navbar-title.center {
		text-align: center;
		flex: 1;
	}
	.navbar-back{flex: 0 0 auto;display: flex;align-items: center;justify-content: center;
		// padding: 0 20rpx;
		width: 88rpx;height: 88rpx;
		image{width: 18rpx;height: 34rpx;}
	
	}
</style>