meishidaQS/components/customNav/customNav.vue

<template>
	<view class="">
		<!-- 自定义导航栏 -->
			<view class="contentView" :style="{'backgroundColor':tinColor}">
			<!-- 状态栏占位 -->
			<view class="navBarBox" :style="{'marginTop':+statusBarHeight+'rpx','backgroundColor':tinColor}">
				<!-- 直正的导航栏内容 -->
				<view v-if="shownav" class="navBar" >
					<view v-if="jiantou==0" class="leftconten">
						<image class="logo" :src="fanhuisrc" mode="aspectFit" @click="leftbuttonsel(1)"></image>
						<view v-if="titledetl==''" class="textlableR">
							<view class="lableTR">{{title}}</view>
						</view>
						<view v-if="titledetl!=''" class="textlable">
							<text class="lableT">{{title}}</text>
							<text  class="lableB">{{titledetl}}</text>
						</view>
					</view>
					<view v-if="jiantou==1" class="leftconten">
						<image class="logo" :src="fanhuisrcb" mode="aspectFit" @click="leftbuttonsel(1)"></image>
						<view v-if="titledetl==''" class="textlableR">
							<view class="lableTRb">{{title}}</view>
						</view>
						<view v-if="titledetl!=''" class="textlable">
							<view class="lableTb">{{title}}</view>
							<view  class="lableB">{{titledetl}}</view>
						</view>
					</view>
					<view class="rightconten">
						<image  v-if="rightBT1==1" class="mycart" :src="rightBTimg1" mode="scaleToFill" @click="leftbuttonsel(2)"></image>
						<image  v-if="rightBT2==1" class="mycart" :src="rightBTimg2" mode="scaleToFill" @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> -->
						<text v-if="xinzeng==1" class="xinzengTxt" @click="leftbuttonsel(5)">{{$t('schema.add')}}</text>
						<uni-icons v-if="addBT==1"  custom-prefix="custom-icon" color="white" type="plus" size="26"  @click="leftbuttonsel(4)"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view v-if="shownav" :style="{height:navBarHeight+'rpx'}">
		</view>
		<view v-if="!shownav" :style="{height:statusBarHeight+'rpx'}">
		</view>
	</view>
		
</template>

<script>

export default
{
	props:{
		shownav:true,
		tinColor:'',
		title:'',
		titledetl:'',
		rightBT1:'',
		rightBTimg1:'',
		rightBT2:0,
		rightBTimg2:'',
		isfaver:0,
		addBT:0,
		jiantou:0,
		xinzeng:0
	},
	data() {
		return{ 
			// 状态栏高度
			statusBarHeight:0,
			// 导航栏高度
			navBarHeight: 50,
			fanhuisrc:'/static/imags/fanhuiz@3x.png',
			fanhuisrcb:'/static/imags/fanhuiB@3x.png',
			
			}
	},
		//第一次加载时调用
	created() {
			//获取手机状态栏高度
			var systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight=systemInfo.statusBarHeight*2+30;
			this.navBarHeight = 50+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: 999;
		background-color: #40AE36;
	}
	.navBarBox{
		display: flex;
		width: 700rpx;
		background-color: #40AE36;
	}
	
	.navBar {
		display: flex;
		width: 700rpx;
		margin-left: 5%;
		padding-bottom: 10rpx;
		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;
	}
	.lableTRb{
		font-size: 30rpx;
		color: #1A1A1A;
	}
	.lableT{
		font-size: 30rpx;
		color: white;
	}
	.lableTb{
		font-size: 30rpx;
		color: #1A1A1A;
		text-align: left;
	}
	.lableB{
		font-size: 22rpx;
		color: white;
	}
	.leftconten{
		display: flex;
		flex-direction: row;
		justify-content:flex-start;
	}
	.rightconten{
		display: flex;
		flex-direction: row;
		justify-content:flex-end;
	}

	.mycart {
		margin-right: 10rpx;
		width: 50rpx;
		height: 46rpx;
	}
	.xinzengTxt{
		margin-right: 10rpx;
		color: white;
		font-size: 28rpx;
	}
</style>