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

<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'}">
				<view class="_navIcon2">
					<image v-if="showIcon" src="../../static/wx_back.png"
						style="width: 20px;height: 20px;padding-right: 6px;" @click="clickIcon"></image>
				</view>
				<!-- 标题布局 -->
				<view class="_nav-title2" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}">
					{{navTitle}}
				</view>
			</view>
		</view>

		<!-- 居中布局 -->
		<!-- ②这里不使用props改用data -->
		<view v-if="navStyle==='center'&&supportCustomBar" 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 v-if="showIcon" src="../../static/wx_back.png" style="width: 23px;height: 23px;"
						@click="clickIcon"></image>
				</view>
				<!-- 标题布局 -->
				<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}">
					{{navTitle}}
				</view>
			</view>
		</view>

		<!-- 占位的前提，必须支持自定义导航栏 -->
		<view v-if="supportCustomBar">
			<view v-if="!supportChange" :style="{'height':navStatusHeight}"></view>
		</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,
				fontSize: 0,
				navStyle: 'left',
				supportCustomBar: true,
			};
		},
		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.fontSize = navInfo.navBar.fontSize + navInfo.unit
			this.supportCustomBar = navInfo.supportCustomBar
		},
		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()

				const pages = getCurrentPages()
				// 有可返回的页面则直接返回，uni.navigateBack 默认返回失败之后会自动刷新页面 ，无法继续返回
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}else{
					uni.switchTab({
						url: '/pages/home/pickUpCard'
					})
				}
					
				return;

			}
		}
	}
</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;
	}
</style>