1111

components/NavBar/NavBar.vue

@@ -3,30 +3,23 @@
 	<view>
 
 		<!-- 左侧布局 -->
-		<view v-if="style==='left'" class="_navLayout" :style="{'background': navBackground,'height':navStatusHeight}">
+		<view v-if="navStyle==='left'" class="_navLayout"
+			:style="{'background': navBackground,'height':navStatusHeight}">
 			<!-- 状态栏 -->
 			<view :style="{'height':statusBarHeight}"></view>
 			<!-- 导航栏,去掉了不可用的宽度 -->
-			<view class="_nav-real" :style="{'height':navHeight,'width':calc(enableWidth - 10px)}">
-
-				<view style="width: 10px;"></view>
-				<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}">
-					{{navTitle}}
-				</view>
-				<!-- 按键区域，占用为不可用的宽度 -->
-				<view class="_navIcon" :style="{'width':disableWidth,'height':navHeight}">
-					<image src="../../static/wx_back.png" style="width: 23px;height: 23px;"></image>
+			<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}">
+				<view class="_navIcon2" >
+					<image src="../../static/wx_back.png" style="width: 20px;height: 20px;"></image>
 				</view>
 				<!-- 标题布局 -->
-				<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}">
-					{{navTitle}}
-				</view>
+				<view style="font-size: 17px;padding-left: 4px;">首页</view>
 			</view>
 		</view>
 
 		<!-- 居中布局 -->
 		<!-- ②这里不使用props改用data -->
-		<view v-if="style==='center'" class="_navLayout"
+		<view v-if="navStyle==='center'" class="_navLayout"
 			:style="{'background': navBackground,'height':navStatusHeight}">
 			<!-- 状态栏 -->
 			<view :style="{'height':statusBarHeight}"></view>
@@ -53,7 +46,6 @@
 	 * 全局默认背景透明，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",
@@ -106,6 +98,7 @@
 				enableWidth: 0,
 				enableHeight: 0,
 				fontSize: 0,
+				navStyle: 'left'
 			};
 		},
 		mounted() {
@@ -117,14 +110,14 @@
 					this.navBackground = defaultTransparentBg.replaceAll(",0)", ",1)")
 				}
 			}
+			// 赋值样式
+			// this.navStyle = getApp().globalData.navInfo.navBar.style
 		},
 		created() {
 			// create阶段能拿取到了props的值,需要使用this.变量名
 			// 但是拿不到data的值
 			// 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用
 			let navInfo = getApp().globalData.navInfo
-			// 赋值全局样式
-			style = navInfo.navBar.style
 			// 总高度
 			this.navStatusHeight = navInfo.navStatusHeight + navInfo.unit
 			this.statusBarHeight = navInfo.statusBarHeight + navInfo.unit
@@ -133,7 +126,6 @@
 			this.enableWidth = navInfo.navBar.enableWidth + navInfo.unit
 			this.enableHeight = navInfo.navBar.enableHeight + navInfo.unit
 			this.fontSize = navInfo.navBar.fontSize + navInfo.unit
-			console.log(style);
 		},
 		methods: {
 			/**
@@ -204,4 +196,13 @@
 		padding-left: 3px;
 		flex-shrink: 0;
 	}
+
+	._navIcon2 {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		margin-left: 10px;
+		flex-shrink: 0;
+		padding-right: 4px;
+	}
 </style>