caimei-applets-hehe/components/cm-module/headerNavbar/headerNavbar.vue

<template name="headerNavbar">
	<!-- 自定义导航栏 -->
	<view class='navbar-wrap' :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="{width:headerBtnPosi.width+'px;',lineHeight:(navbarBtn.height)+'px',top:navbarBtn.top + statusBarHeight+'px;',left:navbarBtn.right+'px;',height:(navbarBtn.height)+'px;'}">
			  <text v-if='haveBack' @click="_goBack" class="iconfont icon-daohangfanhui" :style="{width:headerBtnPosi.width/2+'px',height:navbarBtn.height+'px'}"></text>
	      	  <text  v-if='haveBack' class="iconfont icon-vertical_line" :style="{borderColor:navbarData.borderColor ? navbarData.borderColor : 'rgba(0,0,0,0.4)'}"></text>
			  <text @click="_goHome" class="iconfont icon-fanhuishouye" :style="{width:headerBtnPosi.width/2+'px',height:navbarBtn.height+'px'}"></text>
	  	</view>
	</view>
</template>

<script>
	var self;
	export default{
		name:'headerNavbar',
		props:{
		    navbarData: { // 由父页面传递的数据
				type: Object
		    },
			systeminfo:{
				type:Object
			},
			headerBtnPosi:{
				type:Object
			},
			page:{
				type:Number
			}
		},
		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,
				screenWidth:0
			}
		},
		created() {
			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.navbarBtn=btnPosi
		},
		onLoad(){
			
		},
		methods:{
			_goBack: function () {
		      	uni.navigateBack({
		        	delta: this.page
		      	});
		    },
		    _goHome: function () {
		      	uni.switchTab({
		        	url: '/pages/tabBar/index/index'
		      	})
		    }
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">
	.navbar-wrap {
		 position: fixed;
		 width: 100%;
		 top: 0;
		 z-index: 9999;
		 box-sizing: border-box;
		 background: #FFFFFF;
		 border-bottom: 1px solid #F8F8F8;
	}
	.navbar-text {
		 text-align: center;
		 color: #000000;
		 font-weight: 500;
	}
	.navbar-icon {
		 position: fixed;
		 display: flex;
		 border-radius: 64rpx;
		 border: 0.5px solid rgba(0,0,0, 0.2);
		 box-sizing: border-box;
	}
	.navbar-icon .iconfont {
		 text-align: center;
		 display: inline-block;
		 overflow: hidden;
		 margin-bottom: 1px;
	}
	.navbar-icon .icon-vertical_line {
		color: #999999;
	}
	.navbar-loading {
		 background: #fff;
		 text-align: center;
	}
</style>