maishidaSJ/pages/component/mynavbar/mynavbar.vue

<template>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
		<!-- 状态栏占位 -->
		<view class="statusBar" :style="{paddingTop:statusBarHeight + 'rpx'}">
		</view>
		<!-- 直正的导航栏内容 -->
		<view class="navBar">
			<view class="logo"></view>
			<!-- <image class="logo" src="/static/images/shouye2@3x.png" mode="aspectFit" @click="leftbuttonsel(1)"></image> -->
			<view class="textlable">
				<view class="lableT">{{title}}</view>
				<view class="lableB">{{titledetl}}</view>
			</view>
			<view class="rightconten">
				<uni-icons class="mycart" custom-prefix="custom-icon" color="white" type="more-filled" size="32"  @click="leftbuttonsel(2)"></uni-icons>
				<!--<image  v-if="LinterestBT===1" class="interest" src="/static/images/购物车.png" mode="aspectFit" @click="leftbuttonsel(2)"></image>
				<image  v-if="LmycartBT===1" class="mycart" src="/static/images//购物车.png" mode="aspectFit" @click="leftbuttonsel(3)"></image>-->
			</view>
		</view>
	</view>
</template>

<script>

export default
{
	props:{
		title:"",
		titledetl:"",
		interestBT:0,
		mycartBT:0,
	},
	data() {
		return{ 
			// 状态栏高度
			statusBarHeight:0,
			// 导航栏高度
			navBarHeight: 82,
			LinterestBT:this.interestBT,
			LmycartBT:this.mycartBT,
			
			};
	},
		//第一次加载时调用
	created() {
			//获取手机状态栏高度
			var systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight=systemInfo.statusBarHeight+10;
	},
	methods:{
		leftbuttonsel(item){
			//触发一个更新事件
			this.$emit('Enavbarsel',item);
		}
		
	},
}

</script>

<style>
	
	.navBar {
		width: 90%;
		margin-left: 5%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: center
	}
	.logo {
		width: 70rpx;
		height: 70rpx;
		margin-left: 6rpx;
	}
	.textlable{
		flex-direction:column;
		margin-left: 16rpx;
	}
	.lableT{
		font-size: 28rpx;
		color: white;
	}
	.lableB{
		font-size: 22rpx;
		color: white;
	}
	.rightconten{
		margin-left: auto;
		display: flex;
		flex-direction: row;
		justify-content:right;
	}
	.interest {
		margin-right: 10rpx;
		width: 82rpx;
		height: 82rpx;
	}
	.mycart {
		margin-right: 10rpx;
		width: 82rpx;
		height: 82rpx;
		
	}
</style>