caimei-applets-mcare/pages/goods/components/cm-header.vue

<template name="headerNavbar">
	<!-- 自定义导航栏 -->
	<view
		class="navbar-wrap"
		:class="[headerColor ? 'bg-color' : 'bg-color']"
		:style="{ height: navbarHeight + 'px', paddingTop: CustomBar / 2 + 'px' }"
	>
		<view
			class="navbar-icon"
			v-if="navbarData.showCapsule ? navbarData.showCapsule : true"
			:style="{
				top: navbarBtn.top + statusBarHeight + 'px;',
				lineHeight: navbarBtn.height + 'px;',
				left: 12 + 'px;',
				width: navbarBtn.height + 'px;',
				height: navbarBtn.height + 'px;'
			}"
		>
			<text v-if="haveBack" @click="_goBack" class="iconfont icon-fanhui"></text>
			<text v-else @click="_goHome" class="iconfont icon-shouye"></text>
		</view>
		<view
			class="navbar-text"
			:style="{
				color: navbarData.textColor ? navbarData.textColor : '',
				lineHeight: CustomBar - statusBarHeight + 'px;',
				fontSize: fontSizeSetting + 'px;',
			}"
			:class="platformClass"
		>
			{{ navbarData.title ? navbarData.title : ' ' }}
		</view>
	</view>
</template>

<script>
var self
export default {
	name: 'headerNavbar',
	props: {
		navbarData: {
			// 由父页面传递的数据
			type: Object
		},
		systeminfo: {
			type: Object
		},
		headerBtnPosi: {
			type: Object
		},
		page: {
			type: Number
		},
		headerColor: {
			type: Boolean
		},
		headerTitle: {
			type: String
		},
		type: {
			type: String
		}
	},
	data() {
		return {
			headerType: '',
			CustomBar: this.CustomBar, // 顶部导航栏高度
			clickPath: '/pages/search/search',
			haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
			statusBarHeight: 0, // 状态栏高度
			navbarHeight: 0, // 顶部导航栏高度,
			navbarBtn: {
				// 胶囊位置信息
				height: 0,
				width: 0,
				top: 0,
				bottom: 0,
				right: 0
			},
			platform: '',
			fontSizeSetting: 0
		}
	},
	created() {
		this.headerType = this.type
		this.fontSizeSetting = this.systeminfo.fontSizeSetting
		let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
		let headerPosi = this.headerBtnPosi // 胶囊位置信息
		/**
		 * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
		 * 菜单按键宽度： 87
		 * 菜单按键高度： 32
		 * 菜单按键左边界坐标： 278
		 * 菜单按键上边界坐标： 26
		 * 菜单按键右边界坐标： 365
		 * 菜单按键下边界坐标： 58
		 */
		let btnPosi = {
			// 胶囊实际位置，坐标信息不是左上角原点
			height: headerPosi.height,
			width: headerPosi.width,
			// 胶囊top - 状态栏高度
			top: headerPosi.top - statusBarHeight,
			// 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
			bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
			// 屏幕宽度 - 胶囊right
			right: this.systeminfo.screenWidth - headerPosi.right
		}
		console.log(btnPosi)
		let haveBack
		if (getCurrentPages().length === 1) {
			// 当只有一个页面时
			haveBack = false
		} else {
			haveBack = true
		}
		;(this.haveBack = haveBack), // 获取是否是通过分享进入的小程序
			(this.statusBarHeight = statusBarHeight),
			(this.navbarHeight = headerPosi.bottom + btnPosi.bottom), // 原胶囊bottom + 现胶囊bottom
			(this.$parent.navbarHeight = this.navbarHeight)
		this.$parent.statusBarHeight = this.statusBarHeight
		// console.log(this.navbarHeight);
		this.navbarBtn = btnPosi
	},
	onLoad() {},
	methods: {
		_goBack: function() {
			uni.navigateBack({
				delta: this.page
			})
		},
		_goHome: function() {
			uni.switchTab({
				url: '/pages/tabBar/home/index'
			})
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
.navbar-wrap {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100000;
	box-sizing: border-box;
	&.bg-color {
		animation: showColor 0.3s ease-in-out both;
	}
	&.no-color {
		animation: hideColor 0.3s ease-in-out both;
	}
}
.navbar-text {
	width: 100%;
	color: #000000;
	font-weight: 500;
	position: fixed;
	text-align: center;
}
.navbar-icon {
	position: fixed;
	display: flex;
	border-radius: 50%;
	text-align: center;
	background: rgba(255, 255, 255, 0.6);
	border: 0.5px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	z-index: 9999;
}
.navbar-icon .iconfont {
	height: 100%;
	width: 100%;
	font-size: 38rpx;
	font-weight: bold;
	display: inline-block;
	overflow: hidden;
}
.navbar-icon view {
	height: 18px;
	border-left: 0.5px solid rgba(0, 0, 0, 0.3);
	margin-top: 6px;
}
.navbar-loading {
	background: #fff;
	text-align: center;
}
@keyframes showColor {
	0% {
		background: rgba(255, 255, 255, 0);
	}
	50% {
		background: rgba(255, 255, 255, 0.5);
	}
	100% {
		background: rgba(255, 255, 255, 1);
	}
}
@keyframes hideColor {
	0% {
		background: rgba(255, 255, 255, 1);
	}
	50% {
		background: rgba(255, 255, 255, 0.5);
	}
	100% {
		background: rgba(255, 255, 255, 0);
	}
}
</style>