cashier_weapp/components/navseat.vue

<template>
	<view class="navbarcontent">
		<!-- 导航栏 -->
		<view class="navbar" :class="{active:opacity}">
			<!-- #ifndef APP-PLUS || MP-WEIXIN -->
			<view class="status-bar"></view>
			<view class="navbar_tow flex-between"
				:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
			<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
				<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="navbar_tow flex-between"
						:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
					<!-- #endif -->
						<!-- 标题搜索框 -->
						<view class="flex-between" @click="clicknavigateBack">
							<view class="navbar_tow_one flex-start" v-if="iconshow">
								<u-icon name="arrow-left" :color="iconcolor" size="40"></u-icon>
							</view>
							<!-- #ifndef MP-WEIXIN -->
							<view class="navbar_tow_tow" v-if="opacity || titleshow" :style="{color: namecolor}">
							<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<view class="navbar_tow_tow" v-if="opacity || titleshow"
									:style="{'padding-left':HeighT.custwidth-14 + 'px',color: namecolor}">
								<!-- #endif -->
									{{title}}
								</view>
							</view>
						</view>
					</view>
					<view class="" v-if="heightshow" :style="{height:Topdistance +'px'}">

					</view>
				</view>

</template>

<script>
	export default {
		data() {
			return {
				Topdistance: ''
			};
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			namecolor: {
				type: String,
				default: '#333333'
			},
			opacity: {
				type: Boolean,
				default: false
			},
			titleshow: {//标题是否显示
				type: Boolean,
				default: false
			},
			heightshow: {//是否要占位高度
				type: Boolean,
				default: false
			},
			iconshow: {//返回键是否显示
				type: Boolean,
				default: true
			},
			iconcolor:{//返回键颜色
				type: String,
				default: '#000'
			}
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		mounted() {
			this.$nextTick(() => {
				this.GetTop()
			});
			// 当组件挂载完成后获取距离

		},
		methods: {
			GetTop() {
				this.$u.getRect('.navbar').then(res => {
					this.Topdistance = res.height //滚动距离
					this.$emit('Topdistance', res.height)
				})
			},
			clicknavigateBack() {
				uni.navigateBack()
			}
		}

	};
</script>

<style scoped lang="scss">
	page {
		background: #F9F9F9;
	}

	.navbarcontent {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;

		.active {
			background: rgba(249, 249, 249, 1);
		}

		.status-bar {
			// #ifdef APP-PLUS
			height: calc(var(--status-bar-height) / 2);
			// #endif
			// #ifdef MP-WEIXIN
			height: var(--status-bar-height);
			// #endif
		}

		// #ifdef APP-PLUS
		.statusbarmargin {
			margin-top: var(--status-bar-height);
		}

		// #endif
		.navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;

			.navbar_tow {
				width: 100%;
				position: relative;
				font-size: 36rpx;

				.flex-between {
					// #ifdef APP-PLUS || H5
					margin: 28rpx;
					// #endif
					// #ifdef MP-WEIXIN
					margin-left: 28rpx;
					// #endif
					width: 100%;
					flex-wrap: nowrap;
					height: 100%;
					line-height: 100%;

					.navbar_tow_one {
						height: 100%;
						line-height: 100%;

						text:nth-child(1) {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						text:nth-child(2) {
							margin-left: 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}

					.navbar_tow_tow {

						text-align: center;
						flex: auto;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
					}
				}

			}
		}
	}
</style>