1111

components/NavBar/NavBar.vue

@@ -0,0 +1,97 @@
+<template>
+	<view class="_navLayout" :style="{background: navBg,'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>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	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%);
+			navBg: {
+				type: String,
+				default: "rgba(0,0,0,0.0)"
+			},
+			startChangeHeight: {
+				type: Number,
+				default: 0
+			},
+			endChangeHeight: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				_height: '0px',
+				_height2: '0px',
+				_height3: '0px',
+				_right: '0px',
+			};
+		},
+		created() {
+			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 (res.scrollTop > this.startChangeHeight) {
+					// 可以开始变化了
+					if (res.scrollTop < this.endChangeHeight) {
+						return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + ''
+					} else {
+						// 保持长显示
+						return '1.0'
+					}
+				} else {
+					// 保持无色
+					return '0.0'
+				}
+			}
+		}
+
+	}
+</script>
+
+<style scoped>
+	._navLayout {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		position: sticky;
+		z-index: 999;
+		top: 0
+	}
+
+	._nav-real {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+	}
+
+	._navText {
+		font-size: 13px;
+	}
+
+	._navIcon {
+		width: 23px;
+		height: 23px;
+		position: absolute;
+		left: 4px;
+	}
+</style>