caimei-applets-caimei/components/module/headerNavbar/header-poduct.vue

<template name="headerNavbar">
	<!-- 自定义导航栏 -->
	<view class='navbar-wrap' :class="[headerColor? 'bg-color' : 'no-color']" :style="{height:navbarHeight+'px',paddingTop:statusBarHeight+'px'}"> 
	  	<view class="navbar-text" :style="{lineHeight:(navbarHeight - statusBarHeight)+'px;',fontSize:fontSizeSetting+'px;'}">
	    	{{navbarData.title ? navbarData.title : " "}}
	  	</view>
	  	<view class="navbar-icon" v-if="navbarData.showCapsule ? navbarData.showCapsule : true" 
			  :style="{top:navbarBtn.top + statusBarHeight+'px;',lineHeight:navbarBtn.height+'px;',left:(navbarBtn.right+5)+'px;',width:navbarBtn.height+'px;',height:navbarBtn.height+'px;'}">
			  <text v-if='haveBack' @click="_goBack" class="iconfont icon-fanhui"></text>
	  	</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
			}
		},
		data() {
			return{
				haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
			    statusBarHeight: 0, // 状态栏高度
			    navbarHeight: 0, // 顶部导航栏高度,
			    navbarBtn: { // 胶囊位置信息
			      height: 0,
			      width: 0,
			      top: 0,
			      bottom: 0,
			      right: 0
				},
				platform:'',
				fontSizeSetting:0
			}
		},
		created() {
			// console.log(this.headerBtnPosi);
			// console.log(this.headerColor)
			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
			}
			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/home'
		      	})
		    }
		},
		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 {
		 text-align: center;
		 color: #000000;
		 font-weight: 500;
	}
	.navbar-icon {
		 position: fixed;
		 display: flex;
		 border-radius: 50%;
		 text-align: center;
		 background: rgba(255,255,255,0.2);
		 border: 1px solid rgba(0,0,0, 0.2);
		 box-sizing: border-box;
	}
	.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>