caimei-applets-hehe/components/cm-custom/cm-custom.vue

<template name="headerNavbar">
	<!-- 自定义导航栏 -->
	<view class='navbar-wrap' :style="{height:CustomBar+'px',paddingTop:StatusBar+'px',background:navbarData.bgColor ? navbarData.bgColor : ''}"> 
	  	<view class="navbar-text" 
			  :style="{color:navbarData.textColor ? navbarData.textColor:'',lineHeight:(CustomBar - StatusBar)+'px;',fontSize:fontSizeSetting+'px;',paddingLeft:navbarData.textLeft ? '' : 12+'px'}" :class="platformClass">
	    	  {{navbarData.title ? navbarData.title : " "}}
	  	</view>
	  	<view class="navbar-icon" v-if="navbarData.showCapsule == 1 ? true : false" 
			  :style="{top:capsule.top +'px;',left:((screenWidth-capsule.right)+5)+'px;',height:capsule.height+'px;',lineHeight:capsule.height+'px;'}">
			  <text v-if="navbarData.haveBack" @tap="BackPage" class="iconfont icon-fanhui"></text>
			  <text v-if="navbarData.haveHome" @tap="_goHome" class="iconfont icon-fanhuishouye"></text>
	  	</view>
		<view class="navbar-icon" v-if="navbarData.showSearch == 1 ? true : false"
			  :style="{top:capsule.top+'px;',right:(capsule.width)+'px;',height:capsule.height+'px;',lineHeight:capsule.height+'px;'}">
			  <text @click.stop="_goSearchPath" class="iconfont icon-sousuo"></text>
	  	</view>
	</view>
</template>

<script>
	var self;
	export default{
		name:'headerNavbar',
		props:{
		    navbarData: { // 由父页面传递的数据
				type: Object,
				default: () =>({
					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '', // 导航栏 中间的标题
					haveBack:false,
					home:false,
					textLeft:false,
					bgColor:'',
					textColor:'#000000'
				})
		    }
		},
		data() {
			return{
				CustomBar:this.CustomBar,// 顶部导航栏高度
				StatusBar: this.StatusBar,
				fontSizeSetting:this.fontSizeSetting,
				screenWidth:this.screenWidth,
				capsule:this.capsule,
				platformClass:this.platformClass,
			}
		},
		created() {
			if (getCurrentPages().length === 1) { // 当只有一个页面时
			      this.navbarData.haveBack = false;
			} else {
			      this.navbarData.haveBack = true;
			}
		},
		onLoad(){
			
		},
		methods:{
			BackPage: function () {
				this.$emit('navigateBack')
		    },
			_goSearchPath:function () {
				this.$emit('goSearchPath')
			},
			_goHome:function(){
				uni.switchTab({
		        	url: '/pages/tabBar/index/index'
		      	})
			}
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">
	.navbar-wrap {
		 position: fixed;
		 width: 100%;
		 top: 0;
		 z-index: 100000;
		 box-sizing: border-box;
	}
	.navbar-text {
		 font-size: 30rpx;
		 color: #000000;
		 font-weight: 500;
	}
	.navbar-text.center{
		text-align: center;
	}
	.navbar-text.left{
		text-align: left;
		padding-left: 45px;
	}
	.navbar-icon {
		 position: fixed;
		 display: flex;
		 box-sizing: border-box;
	}
	.navbar-icon .iconfont {
		 display: inline-block;
		 overflow: hidden;
		 font-size: 44rpx;
		 padding-right:40rpx;
		 margin-top: 1px;
	}
	.navbar-icon .icon-sousuo {
		color: #000000;
	}
	.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;
	}
</style>