cashier_weapp/components/nav.vue

<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="navbar" :class="{active:opacity}">
			<!-- #ifndef APP-PLUS || MP-WEIXIN || MP-ALIPAY -->
			<view class="status-bar"></view>
			<view class="navbar_tow 1 flex-between"
				:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="status-bar"></view>
			<view class="navbar_tow 2 flex-between">
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="navbar_tow 3 flex-between"
				:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="navbar_tow 4 flex-between"
				:style="{'height':HeighT.customBar+'px','marginTop':HeighT.statusBar+'px','padding-right':menuButtonInfo.width+50 + 'px'}">
			<!-- #endif -->
				<!-- 标题搜索框 -->
				<view class="flex-between">
					<view class="navbar_tow_one flex-start">
						<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
							size="16"></u-icon>
					</view>
					<view class="navbar_tow_tow flex-start">
						<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
						<view class="navbar_tow_towview">搜索</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	console.log("menuButtonInfo==",menuButtonInfo)
	export default {
		data() {
			return {
				keyword: '',
				opacity: false,
			};
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏
				this.opacity = false
			} else {
				this.opacity = true
			}
		},
		computed: {
			HeighT() { //手机类型的尺寸
				console.log("navHeighT==",this.$store.getters.is_BarHeight)
				return this.$store.getters.is_BarHeight
			},
		},
		mounted() {
			console.log(1)
			console.log(uni.getMenuButtonBoundingClientRect())
		},
		methods: {}

	};
</script>

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

	.content {
		position: -webkit-sticky;
		position: sticky;
		top: 0;

		.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;
			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 {
						position: relative;
						height: 100%;
						line-height: 100%;
						flex: 1;
						margin-left: 10rpx;

						.navbar_tow_towview {
							position: absolute;
							right: 4rpx;
							top: 50%;
							transform: translate(0, -50%);
							text-align: center;
							background: #FEE06A;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							width: 116rpx;
							height: 56rpx;
							line-height: 56rpx;
							border-radius: 34rpx 34rpx 34rpx 34rpx;
						}

						.navbar_tow_towinput {
							height: 64rpx;
							padding-left: 32rpx;
							padding-right: 116rpx;
							flex: auto;
							background: #FFFFFF;
							border-radius: 34rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; //溢出不换行
						}
					}
				}

			}
		}
	}
</style>