yxt-yyth-ui-miniprogram/components/NavBar/NavBar.vue

<template>
	<!-- ②这里不使用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">{{navTitle}}</view>
			<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: {
			// 标题
			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,
				_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
		},
		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 scoped>
	._navLayout {
		display: flex;
		flex-direction: column;
		width: 100%;
		position: fixed;
		z-index: 999;
		top: 0
	}

	._nav-real {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	._navText {
		font-size: 13px;
		color: white;
	}

	._navIcon {
		width: 23px;
		height: 23px;
		position: absolute;
		left: 4px;
	}
</style>