maishidaSJ/components/customNav/customNav.vue

<template>
	<view style="">
		<!-- 自定义导航栏 -->
			<view class="contentView">
			<!-- 状态栏占位 -->
			<view class="navBarBox" :style="{marginTop:statusBarHeight+'rpx'}">
				<!-- 直正的导航栏内容 -->
				<view v-if="shownav" class="navBar" >
					<view class="leftconten">
						<image v-if="showfanhui!=1" class="logo" src="/static/images/fanhuiz@3x.png" mode="aspectFit" @click="leftbuttonsel(1)"></image>
						<view v-if="titledetl==''" class="textlableR">
							<view class="lableTR">
								<text style="color: white;">{{title}}</text>
							</view>
						</view>
						<view v-if="titledetl!=''" class="textlable">
							<view class="lableT">{{title}}</view>
							<view  class="lableB">{{titledetl}}</view>
						</view>
					</view>
					<view class="rightconten">
						<!-- <image  v-if="shareBT==1" class="mycart" src="/static/images/fenxiang@3x.png" mode="aspectFit" @click="leftbuttonsel(2)"></image> -->
						<image  v-if="faverBT==1" class="mycart" :src="isfaver==0?'/static/images/faver@3x.png':'/static/images/faverr@3x.png'" mode="aspectFit" @click="leftbuttonsel(3)"></image>
						<!-- <image  v-if="addBT==1" class="mycart" src="/static/images/plus-circle-fill@3x.png" mode="aspectFit" @click="leftbuttonsel(4)"></image> -->
						<uni-icons v-if="addBT==1"  custom-prefix="custom-icon" color="white" type="plus" size="26"  @click="leftbuttonsel(4)"></uni-icons>
						<text v-if="deleteBt==1" style="font-size: 30rpx;color: white;" @click="leftbuttonsel(5)">{{$t('index.sanchu')}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="shownav" :style="{height:navBarHeight+'rpx'}">
		</view>
		<view v-if="!shownav" :style="{height:yincbtHeight+'rpx'}">
		</view>
	</view>
		
</template>

<script>

export default
{
	props:{
		shownav:true,
		title:'',
		titledetl:'',
		faverBT:0,
		shareBT:0,
		isfaver:0,
		addBT:0,
		deleteBt:0,
		showfanhui:0
	},
	data() {
		return{ 
			// 状态栏高度
			statusBarHeight:0,
			// 导航栏高度
			navBarHeight: 50,
			yincbtHeight:0,
			};
	},
		//第一次加载时调用
	created() {
			//获取手机状态栏高度
			var systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight=systemInfo.statusBarHeight*2+30;
			this.navBarHeight = 50+this.statusBarHeight;
			this.yincbtHeight=this.statusBarHeight;
	},
	methods:{
		leftbuttonsel(item){
			//触发一个更新事件
			if(item==1){
				uni.navigateBack();
			}
			this.$emit('Enavbarsel',item);
		}
		
	},
}

</script>

<style>
	.contentView{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99999;
		background-color: #40AE36;
	}
	.navBarBox{
		display: flex;
		width: 100%;
		background-color: #40AE36;
	}
	
	.navBar {
		display: flex;
		width: 92%;
		margin-left: 4%;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center
	}
	.logo {
		width: 50rpx;
		height: 50rpx;
		margin-left: 6rpx;
	}
	.textlable{
		flex-direction:column;
		margin-left: 20rpx;
	}
	.textlableR{
		flex-direction:column;
		margin-left: 20rpx;
	}
	.lableTR{
		font-size: 32rpx;
		color: white;
	}
	.lableT{
		font-size: 30rpx;
		color: white;
	}
	.lableB{
		font-size: 22rpx;
		color: white;
	}
	.leftconten{
		display: flex;
		flex-direction: row;
		justify-content:flex-start;
		margin-left: 20rpx;
	}
	.rightconten{
		display: flex;
		flex-direction: row;
		justify-content:flex-end;
	}

	.mycart {
		margin-right: 10rpx;
		width: 50rpx;
		height: 50rpx;
		
	}
</style>