1111

components/NavBar/NavBar.vue

@@ -1,13 +1,28 @@
 <template>
+
+	<view>
+
+		<!-- 居中布局 -->
 		<!-- ②这里不使用props改用data -->
-	<view class="_navLayout" :style="{background: navBackground,'height':_height}">
+		<view :v-if="style==='center'" class="_navLayout"
-		<view :style="{'height':_height3}"></view>
+			:style="{'background': navBackground,'height':navStatusHeight}">
-		<view class="_nav-real" :style="{'height':_height2}">
+			<!-- 状态栏 -->
-			<view class="_navText">{{navTitle}}</view>
+			<view :style="{'height':statusBarHeight}"></view>
-			<image v-if="showIcon" class="_navIcon" src="../../static/wx_back.png" @click="clickIcon">
+			<!-- 导航栏,去掉了不可用的宽度 -->
-			</image>
+			<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}">
+				<!-- 按键区域，占用为不可用的宽度 -->
+				<view class="_navIcon" :style="{'width':disableWidth,'height':navHeight}">
+					<image src="../../static/wx_back.png" style="width: 23px;height: 23px;"></image>
+				</view>
+				<!-- 标题布局 -->
+				<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}">
+					{{navTitle}}
 				</view>
 			</view>
+		</view>
+
+		<view v-if="!supportChange" :style="{'height':navStatusHeight}"></view>
+
 </template>
 
 <script>
@@ -15,10 +30,15 @@
 	 * 全局默认背景透明，supportChange= false 会对默认色变成不透明
 	 */
 	const defaultTransparentBg = "linear-gradient(89.26deg, rgba(254,144,56,0) 0.75%,rgba(255,177,118,0) 99.78%)";
+	let style = 'center'
 
 	export default {
 		name: "NavBar",
 		props: {
+			color: {
+				type: String,
+				default: "white"
+			},
 			// 标题
 			navTitle: {
 				type: String,
@@ -56,10 +76,13 @@
 			return {
 				// ①用一个新的变量接收props属性
 				navBackground: this.navBg,
-				_height: '0px',
+				navStatusHeight: 0,
-				_height2: '0px',
+				statusBarHeight: 0,
-				_height3: '0px',
+				navHeight: 0,
-				_right: '0px',
+				disableWidth: 0,
+				enableWidth: 0,
+				enableHeight: 0,
+				fontSize: 0,
 			};
 		},
 		mounted() {
@@ -77,10 +100,17 @@
 			// 但是拿不到data的值
 			// 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用
 			let navInfo = getApp().globalData.navInfo
-			this._height = navInfo.navHeight
+			// 赋值全局样式
-			this._height2 = navInfo.navUseHeight
+			style = navInfo.navBar.style
-			this._height3 = navInfo.statusBarHeight
+			// 总高度
-			this._right = navInfo.navPaddingRight
+			this.navStatusHeight = navInfo.navStatusHeight + navInfo.unit
+			this.statusBarHeight = navInfo.statusBarHeight + navInfo.unit
+			this.navHeight = navInfo.navBar.height + navInfo.unit
+			this.disableWidth = navInfo.navBar.disableWidth + navInfo.unit
+			this.enableWidth = navInfo.navBar.enableWidth + navInfo.unit
+			this.enableHeight = navInfo.navBar.enableHeight + navInfo.unit
+			this.fontSize = navInfo.navBar.fontSize + navInfo.unit
+			console.log(this);
 		},
 		methods: {
 			/**
@@ -117,33 +147,37 @@
 	}
 </script>
 
-<style scoped>
+<style>
 	._navLayout {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		position: fixed;
 		z-index: 999;
-		top: 0
+		top: 0;
+		position: fixed;
 	}
 
 	._nav-real {
 		display: flex;
 		flex-direction: row;
-		justify-content: center;
+		width: 100%;
 		align-items: center;
-		position: relative;
 	}
 
-	._navText {
+	._nav-title {
-		font-size: 13px;
+		text-align: center;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		word-break: break-all;
+		white-space: nowrap;
+		width: 100%;
 		color: white;
 	}
 
 	._navIcon {
-		width: 23px;
+		display: flex;
-		height: 23px;
+		flex-direction: row;
-		position: absolute;
+		align-items: center;
-		left: 4px;
+		padding-left: 3px;
 	}
 </style>