1111

components/NavBar/NavBar.vue

@@ -1,53 +1,89 @@
 <template>
-	<view class="_navLayout" :style="{background: navBg,'height':_height}">
+	<!-- ②这里不使用props改用data -->
+	<view class="_navLayout" :style="{background: navBackground,'height':_height}">
 		<view :style="{'height':_height3}"></view>
 		<view class="_nav-real" :style="{'height':_height2}">
 			<view class="_navText">登录</view>
-			<image class="_navIcon" src="../../static/wx_back.png">
+			<image v-if="showIcon" class="_navIcon" src="../../static/wx_back.png" @click="clickIcon">
 			</image>
 		</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: {
-			// 渐变透明使用此属性即可
-			// -webkit-linear-gradient(top, rgba(0,0,0,1)0%,rgba(0,0,0,0.5)66%, rgba(0,0,0,0)99%);
+			// 是否支持透明
+			supportChange: {
+				type: Boolean,
+				default: true
+			},
+			// 背景色
+			// 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明
 			navBg: {
 				type: String,
-				default: "rgba(0,0,0,0.0)"
+				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,
 				_height: '0px',
 				_height2: '0px',
 				_height3: '0px',
 				_right: '0px',
 			};
 		},
+		mounted() {
+			// mounted能拿到data值
+			if (!this.supportChange) {
+				if (this.navBg === defaultTransparentBg) {
+					// 使用默认的时候由于是全透明，需要改成不透明
+					// ③达到修改props属性的结果
+					this.navBackground = defaultTransparentBg.replaceAll(",0)", ",1)")
+				}
+			}
+		},
 		created() {
+			// create阶段能拿取到了props的值,需要使用this.变量名
+			// 但是拿不到data的值
+			// 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用
 			let navInfo = getApp().globalData.navInfo
 			this._height = navInfo.navHeight
 			this._height2 = navInfo.navUseHeight
 			this._height3 = navInfo.statusBarHeight
 			this._right = navInfo.navPaddingRight
-			console.log(this._height);
 		},
 		methods: {
+			/**
+			 * 自定义颜色渐变的值
+			 */
 			alpha(res) {
-
+				if (!this.supportChange)
+					return '1.0'
 				if (res.scrollTop > this.startChangeHeight) {
 					// 可以开始变化了
 					if (res.scrollTop < this.endChangeHeight) {
@@ -60,9 +96,19 @@
 					// 保持无色
 					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>
 
@@ -71,7 +117,7 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		position: sticky;
+		position: fixed;
 		z-index: 999;
 		top: 0
 	}
@@ -86,6 +132,7 @@
 
 	._navText {
 		font-size: 13px;
+		color: white;
 	}
 
 	._navIcon {