<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>