From eb833545fb141aab885b0c1ae7c60e444a8f78fc Mon Sep 17 00:00:00 2001
From: mac <1556608@qq.com>
Date: Mon, 4 Dec 2023 20:57:27 +0800
Subject: [PATCH] 11

---
 components/NavBar/NavBar.vue | 425 ++++++++++++++++++-----------------
 1 file changed, 218 insertions(+), 207 deletions(-)

diff --git a/components/NavBar/NavBar.vue b/components/NavBar/NavBar.vue
index 73db11a..a5ea39d 100644
--- a/components/NavBar/NavBar.vue
+++ b/components/NavBar/NavBar.vue
@@ -1,208 +1,219 @@
-<template>
-
-	<view>
-
-		<!-- 左侧布局 -->
-		<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':enableWidth}">
-				<view class="_navIcon2" >
-					<image src="../../static/wx_back.png" style="width: 20px;height: 20px;"></image>
-				</view>
-				<!-- 标题布局 -->
-				<view style="font-size: 17px;padding-left: 4px;">首页</view>
-			</view>
-		</view>
-
-		<!-- 居中布局 -->
-		<!-- ②这里不使用props改用data -->
-		<view v-if="navStyle==='center'" class="_navLayout"
-			:style="{'background': navBackground,'height':navStatusHeight}">
-			<!-- 状态栏 -->
-			<view :style="{'height':statusBarHeight}"></view>
-			<!-- 导航栏,去掉了不可用的宽度 -->
-			<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>
-
-	</view>
-</template>
-
-<script>
-	/**
-	 * 全局默认背景透明，supportChange= false 会对默认色变成不透明
-	 */
-	const defaultTransparentBg = "linear-gradient(89.26deg, rgba(254,144,56,0) 0.75%,rgba(255,177,118,0) 99.78%)";
-
-	export default {
-		name: "NavBar",
-		props: {
-			color: {
-				type: String,
-				default: "white"
-			},
-			// 标题
-			navTitle: {
-				type: String,
-				default: ""
-			},
-			// 是否支持透明
-			supportChange: {
-				type: Boolean,
-				default: true
-			},
-			// 背景色
-			// 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明
-			navBg: {
-				type: String,
-				default: defaultTransparentBg
-			},
-			// 渐变开始的高度 0->1
-			startChangeHeight: {
-				type: Number,
-				default: 0
-			},
-			// 渐变停止的高度
-			// ->1
-			endChangeHeight: {
-				type: Number,
-				default: 0
-			},
-			// 显示icon
-			showIcon: {
-				type: Boolean,
-				default: true
-			}
-		},
-		data() {
-			return {
-				// ①用一个新的变量接收props属性
-				navBackground: this.navBg,
-				navStatusHeight: 0,
-				statusBarHeight: 0,
-				navHeight: 0,
-				disableWidth: 0,
-				enableWidth: 0,
-				enableHeight: 0,
-				fontSize: 0,
-				navStyle: 'left'
-			};
-		},
-		mounted() {
-			// mounted能拿到data值
-			if (!this.supportChange) {
-				if (this.navBg === defaultTransparentBg) {
-					// 使用默认的时候由于是全透明，需要改成不透明
-					// ③达到修改props属性的结果
-					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
-			// 总高度
-			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
-		},
-		methods: {
-			/**
-			 * 自定义颜色渐变的值
-			 */
-			alpha(res) {
-				if (!this.supportChange)
-					return '1.0'
-				if (res.scrollTop > this.startChangeHeight) {
-					// 可以开始变化了
-					if (res.scrollTop < this.endChangeHeight) {
-						return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + ''
-					} else {
-						// 保持长显示
-						return '1.0'
-					}
-				} else {
-					// 保持无色
-					return '0.0'
-				}
-			},
-			/**
-			 * 提供默认的颜色变化功能
-			 */
-			defaultColorBgAlpha(res) {
-				let x = this.alpha(res)
-				this.navBackground = "linear-gradient(89.26deg, rgba(254,144,56," + x +
-					") 0.75%,rgba(255,177,118," + x + ") 99.78%)"
-			},
-			clickIcon() {
-				uni.navigateBack()
-			}
-		}
-	}
-</script>
-
-<style>
-	._navLayout {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		z-index: 999;
-		top: 0;
-		position: fixed;
-	}
-
-	._nav-real {
-		display: flex;
-		flex-direction: row;
-		width: 100%;
-		align-items: center;
-	}
-
-	._nav-title {
-		text-align: center;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		word-break: break-all;
-		white-space: nowrap;
-		width: 100%;
-		color: white;
-	}
-
-	._navIcon {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		padding-left: 3px;
-		flex-shrink: 0;
-	}
-
-	._navIcon2 {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		margin-left: 10px;
-		flex-shrink: 0;
-		padding-right: 4px;
-	}
+<template>
+
+	<view>
+
+		<!-- 左侧布局 -->
+		<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+' - 9px)' ,'margin-left':'9px','background':'red'}">
+				<view class="_navIcon2">
+					<image src="../../static/wx_back.png" style="width: 20px;height: 20px;"></image>
+				</view>
+				<!-- 标题布局 -->
+				<view class="_nav-title2" :style="{'font-size':fontSize}">>{{navTitle}}</view>
+			</view>
+		</view>
+
+		<!-- 居中布局 -->
+		<!-- ②这里不使用props改用data -->
+		<view v-if="navStyle==='center'" class="_navLayout"
+			:style="{'background': navBackground,'height':navStatusHeight}">
+			<!-- 状态栏 -->
+			<view :style="{'height':statusBarHeight}"></view>
+			<!-- 导航栏,去掉了不可用的宽度 -->
+			<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>
+
+	</view>
+</template>
+
+<script>
+	/**
+	 * 全局默认背景透明，supportChange= false 会对默认色变成不透明
+	 */
+	const defaultTransparentBg = "linear-gradient(89.26deg, rgba(254,144,56,0) 0.75%,rgba(255,177,118,0) 99.78%)";
+
+	export default {
+		name: "NavBar",
+		props: {
+			color: {
+				type: String,
+				default: "white"
+			},
+			// 标题
+			navTitle: {
+				type: String,
+				default: ""
+			},
+			// 是否支持透明
+			supportChange: {
+				type: Boolean,
+				default: true
+			},
+			// 背景色
+			// 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明
+			navBg: {
+				type: String,
+				default: defaultTransparentBg
+			},
+			// 渐变开始的高度 0->1
+			startChangeHeight: {
+				type: Number,
+				default: 0
+			},
+			// 渐变停止的高度
+			// ->1
+			endChangeHeight: {
+				type: Number,
+				default: 0
+			},
+			// 显示icon
+			showIcon: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				// ①用一个新的变量接收props属性
+				navBackground: this.navBg,
+				navStatusHeight: 0,
+				statusBarHeight: 0,
+				navHeight: 0,
+				disableWidth: 0,
+				enableWidth: 0,
+				enableHeight: 0,
+				fontSize: 0,
+				navStyle: 'left'
+			};
+		},
+		mounted() {
+			// mounted能拿到data值
+			if (!this.supportChange) {
+				if (this.navBg === defaultTransparentBg) {
+					// 使用默认的时候由于是全透明，需要改成不透明
+					// ③达到修改props属性的结果
+					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
+			// 总高度
+			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
+		},
+		methods: {
+			/**
+			 * 自定义颜色渐变的值
+			 */
+			alpha(res) {
+				if (!this.supportChange)
+					return '1.0'
+				if (res.scrollTop > this.startChangeHeight) {
+					// 可以开始变化了
+					if (res.scrollTop < this.endChangeHeight) {
+						return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + ''
+					} else {
+						// 保持长显示
+						return '1.0'
+					}
+				} else {
+					// 保持无色
+					return '0.0'
+				}
+			},
+			/**
+			 * 提供默认的颜色变化功能
+			 */
+			defaultColorBgAlpha(res) {
+				let x = this.alpha(res)
+				this.navBackground = "linear-gradient(89.26deg, rgba(254,144,56," + x +
+					") 0.75%,rgba(255,177,118," + x + ") 99.78%)"
+			},
+			clickIcon() {
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style>
+	._navLayout {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		z-index: 999;
+		top: 0;
+		position: fixed;
+	}
+
+	._nav-real {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		align-items: center;
+	}
+
+	._nav-title {
+		text-align: center;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		word-break: break-all;
+		white-space: nowrap;
+		width: 100%;
+		color: white;
+	}
+
+	._nav-title2 {
+		text-overflow: ellipsis;
+		overflow: hidden;
+		word-break: break-all;
+		white-space: nowrap;
+		width: 100%;
+		color: white;
+		padding-left: 5px;
+		flex: 1;
+	}
+
+	._navIcon {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding-left: 3px;
+		flex-shrink: 0;
+	}
+
+	._navIcon2 {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex-shrink: 0;
+		padding-right: 6px;
+	}
 </style>
\ No newline at end of file