meishidaYH/msdYongHu/pages/component/mynavbar/mynavbar.vue

<template>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
		<!-- 状态栏占位 -->
		<view class="statusBar" :style="{paddingTop:statusBarHeight + 'rpx'}">
		</view>
		<!-- 直正的导航栏内容 -->
		<view class="navBar">
			<image class="logo" src="/static/meishi/location.png" mode="aspectFit" @click="leftbuttonsel(1)"></image>
			<view class="textlable" @click="leftbuttonsel(1)">
				<view class="lableT textfontB4">
					<text class="titleT">{{title}}</text>
				</view>
				<view class="lableB textfontS2">
					<text class="changduxz">{{titledetl}}</text>
				</view>
			</view>
			
			<!-- <view class="rightconten">
				<image class="interest" src="/static/meishi/notifcation.png" mode="aspectFit" @click="leftbuttonsel(2)"></image>
				
			</view> -->
		</view>
		<view class="contentColumnC">
			<uni-search-bar class="searchbar" :placeholder="$t('index.searchgoods')" cancelButton="none" locateButton="always" :readonly="readonly" v-on:searchClick="searchClick"></uni-search-bar>
		</view>
		
	</view>
</template>

<script>

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

</script>

<style>
	.navBarBox{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		background-color: #00A6FF;
	}
	.navBar {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 90%;
		margin-left: 5%;
		margin-top: 40rpx;
		height: 100rpx;
	}
	.searchbar{
		width: 90%;
	}
	.logo {
		width: 56rpx;
		height: 56rpx;
		margin-left: 6rpx;
	}
	.textlable{
		flex-direction:column;
		margin-left: 8rpx;
		width: 80%;
	}
	.lableT{
		color: black;
	}
	.lableB{
		color: black;
	}
	.titleT{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.changduxz{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.rightconten{
		margin-left: auto;
		display: flex;
		flex-direction: row;
		justify-content:right;
	}
	.interest {
		margin-right: 10rpx;
		width: 54rpx;
		height: 54rpx;
	}
	.mycart {
		margin-right: 10rpx;
		width: 82rpx;
		height: 82rpx;
		
	}
</style>