zx_flk_app/components/navBar/navigation.vue

<template>
		<view>
			<view class="top-view flex-row"
			:style="{'padding-top':`${statusBarHeight1}px`,background:`rgba(255,255,255,${opacity})`}">
			<view class="navHei" :style="{'height':`calc(${navabarHeight}rpx)`,'width':'100%',}">
				<view v-if="isback" class="left" @tap="bindReturnView">
					<img v-if="type" class="return-view" :src="'https://qiniu.bms16.com/'+ (whiteColor?'Fjpnr3cH9ZqTQrGlw3Ywp3qbJGIG':'FnHXbzly7aXi8zLghrTU5BZdwH5_')" />
					<view v-else class="pos">
						<view   class="car-detail-style">
							<image  class="return-view"
								src="https://qiniu.bms16.com/FnHXbzly7aXi8zLghrTU5BZdwH5_" mode="aspectFit"></image>
						</view>
						<view :style="{opacity:1 - opacity,background:`rgba(0,0,0,0.4)`}" class="car-detail-style">
							<image  class="return-view"
								src="https://qiniu.bms16.com/Fjpnr3cH9ZqTQrGlw3Ywp3qbJGIG" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<text class="top-text" :class="whiteColor?'whiteClass':''">{{name}}</text>
			</view>
		</view>
		<view v-if="type" :style="{'height':`calc(${navabarHeight}rpx + ${statusBarHeight1}px)`}"></view>
		</view>
</template>

<script>
	export default {
		props: {
			isback:{
				type: Boolean,
				default: true
			},
			name: {
				type: String,
				default: ''
			},
			scroll: {
				default: 0,
				type: Number
			},
			type:{
				type: Boolean,
				default: false
			},
			whiteColor:{
				type: Boolean,
				default: false
			},
		},
		watch: {
			scroll(n) {
				this.opacity = n / 160
			}
		},
		data() {
			return {
				opacity: 0,
				statusBarHeight1: 0,
				navabarHeight: 0,
			}
		},
		mounted() {
			this._getCustomBar()
			this.opacity = this.scroll
		},
		methods: {
			_getCustomBar() {
				const sysinfo = uni.getSystemInfoSync()
				// let GAP = 8
				// // #ifdef MP-ALIPAY
				// GAP = 0
				// // #endif
				// // #ifdef APP-PLUS

				// // #endif
				// // #ifdef MP-WEIXIN
				// const clientRect = uni.getMenuButtonBoundingClientRect()
				// const navabarHeight = (clientRect.bottom - sysinfo.statusBarHeight) + (clientRect.top - sysinfo.statusBarHeight) + GAP
				// this.navabarHeight = navabarHeight
				// // #endif

				this.statusBarHeight1 = sysinfo.statusBarHeight
				this.navabarHeight = 100
			},

			bindReturnView() {
				uni.navigateBack({
					delta: 1,
				}) // 返回上一页
			},
		}
	}
</script>

<style scoped>
	.navHei {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.left {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 0;
	}

	.top-view {
		width: 100%;
		position: fixed;
		z-index: 99999;
		left: 0;
		top: 0;
		align-items: center;
		padding: 0 26rpx;
		text-align: center;

	}

	.navHei {
		position: relative;
		width: 56rpx;
		height: 56rpx;
	}

	.return-view {
		width: 40rpx;
		height: 40rpx;
		
		/* margin-top: 24rpx; */
		/* 		margin-left: 32rpx; */
	}

	.top-text {
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: 600;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		font-family: PingFangSC, PingFang SC;
		/* position: absolute;
		transform: translate(-50%,50%); */
		position: fixed;
		/* transform: translate(-90%,50%); */
		left: 10%;
	}
	.top-text.whiteClass {
		color: #FFFFFF;
	}
	.view-height {
		/* border-bottom:2rpx solid #060809 ; */
		/* margin-bottom: 32rpx; */
	}

	.car-detail-style {
		width: 56rpx;
		height: 56rpx;
		
		border-radius: 16rpx 0rpx 16rpx 0rpx;
		padding-left: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
		top: 0;
	}
</style>