phone_uni/components/custom-layout/custom-nav-bar.vue

<template>
	<view class="ljs-top" :style="'height: calc('+ statusBarHeight +'px + '+ topHeight+'rpx)'">
		<view class="topZw">
			<view class="comStatus" :style="'height: '+ statusBarHeight +'px'"></view>
			<view class="topMain" :style="'height: '+ topHeight+'rpx'"></view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="top_bg" :style="{'opacity':opacity}">
			<view class="top_bg" :style="{
			'background': !backgroundImageShow?backgroundColor:('url('+backgroundImage+') no-repeat;'),
			backgroundSize: '100% 100%'
		}"></view>
		</view>
		<view class="top">
		<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="top_bg" :style="{'opacity':opacity}">
				<view class="top_bg" :style="topStyle"></view>
			</view>
			<view class="top">
			<!-- #endif -->
				<!-- 这里是状态栏 占据高度 -->
				<view class="comStatus" :style="'height: '+ statusBarHeight +'px'"></view>
				<view class="topMain" :style="'height:'+topHeight+'rpx'">
					<!-- 返回 -->
					<view @click="goBack" class="back" v-if="myback.show">
						<u-icon size="20" name="arrow-left"></u-icon>
					</view>
					<view @click="goBack" class="backLogo" v-if="myback.logoShow">
						<image style="width: 160rpx; height: 66rpx;" mode="scaleToFill" :src="logoImage"></image>
					</view>
					<slot></slot>
					<!-- 标题文字 -->
					<text class="title" :style="{'color': titleColor}">{{title}}</text>
				</view>
			</view>
			<!-- <view class="yuanhu"></view> -->
		</view>
</template>
<script>
	import logoImage from '@/static/images/logo.png'
	export default {
		data() {
			return {
				logoImage,
				opacity: 0,
				scrollTop: 0,
				statusBarHeight: 0, // 状态按钮高度
				myback: {
					show: true,
				},
				// top样式
				topStyle: {}
			}
		},
		props: {
			// 标题内容
			title: String,
			// 标题颜色
			titleColor: {
				type: String,
				default: '#000000'
			},
			// 返回按钮相关配置
			back: {
				type: Object,
				default: function() {
					return {
						// 是否显示返回按钮，默认显示
						show: true,
						logoShow: false,
						// 返回按钮的图片地址
						// imgUrl: require('../../static/images/ico_back.png')
					}
				}
			},
			// 开启背景图片，未开启，使用背景颜色，开启backgroundImage为必填项
			backgroundImageShow: {
				type: Boolean,
				default: false
			},
			// 背景颜色，支持渐变色，如：linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B);
			backgroundColor: {
				type: String,
				default: 'linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B)'
			},
			// 背景图片地址，使用前需配置backgroundImageShow为true。
			backgroundImage: String,
			// 是否保存顶部栏高度
			hideHeight: {
				type: Boolean,
				default: true
			},
			// 高度（除状态栏）
			topHeight: {
				type: Number,
				default: 80
			},
		},
		mounted() {
			this.init();
		},
		methods: {
			goBack() {
				const data = getCurrentPages()
				if (data.length > 1) {
					uni.navigateBack();
				} else {
					// *使用此法返回需要遵守现有路由层级
					const route = data[0].route.split('/')
					uni.switchTab({
						url: `/${route[0]}/${route[1]}/index`
					});
				}
			},
			init() {
				// #ifdef MP-WEIXIN
				// #endif
				// #ifndef MP-WEIXIN
				if (this.backgroundImageShow) {
					this.topStyle = {
						'background-image': 'url(' + this.backgroundImage + ')',
						'background-repeat': 'no-repeat',
						backgroundSize: '100% 100%'
					}
				} else {
					this.topStyle = {
						'background': this.backgroundColor
					}
				}
				// #endif
				this.statusBarHeight = this.getSysInfo().statusBarHeight;
				for (let key in this.back) {
					this.myback[key] = this.back[key];
				}
			},
			getSysInfo() {
				return uni.getSystemInfoSync();
			},
			// 转接到达顶部距离参数
			scrollScroll(event) {
				this.scrollTop = event
				if (event < 200) {
					this.opacity = event / 100 / 2
				} else {
					this.opacity = 1
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ljs-top {
		width: 100%;
		position: relative;

		.topZw {
			width: 100%;

			.comStatus {
				width: 100%;
				position: relative;
			}

			.topMain {
				width: 100%;
				display: flex;
				align-items: center;
			}
		}

		.top_bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.top {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 90;

			.comStatus {
				width: 100%;
				position: relative;
			}

			.topMain {
				width: 100%;
				position: relative;
				display: flex;
				align-items: center;
				padding: 0 20upx;
				box-sizing: border-box;
				.back {
					width: 60upx;
					height: 60upx;
					box-sizing: border-box;
					padding: 10upx;
					position: absolute;
					top: 10upx;
					left: 20upx;
					z-index: 2;

					.img {
						width: 40upx;
						height: 40upx;
						display: block;
					}
				}
				.backLogo{
					width: fit-content;
				}

				.title {
					flex: 1;
					height: 58upx;
					line-height: 58upx;
					text-align: center;
					/* #ifndef APP-PLUS-NVUE || APP-NVUE */
					position: absolute;
					top: 11upx;
					left: 50%;
					transform: translate(-50%, 0%);
					z-index: 90;
					/* #endif */
					color: #FFF;
					font-size: 32upx;
				}
			}
		}

		.yuanhu {
			width: 100%;
			height: 30upx;
			border-radius: 30upx 30upx 0 0;
			background-color: #FFF;
			opacity: 0.1;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 90;
		}
	}
</style>