更改动态导航栏

2025-02-08 09:16:43 +08:00
parent 20b5539a82
commit 5add1f1282
33 changed files with 21325 additions and 72 deletions
--- a/components/indexnav.vue
+++ b/components/indexnav.vue
@@ -0,0 +1,147 @@
+<template>
+	<view>
+		<!-- 占位高度 -->
+		<view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
+		<view class="navbar"
+			:style="{ height: `${height}px`, backgroundColor: isTransparent ? 'transparent' : '#fff' }">
+			<!-- 左边返回键 -->
+			<view v-if="showBack" @click="goBack" class="back-icon">
+				<up-icon name="arrow-left" color="#606266" size="24"></up-icon>
+			</view>
+			<!-- 中间内容 -->
+			<view class="center-content" :style="centerContentStyle">
+				<view v-if="showSearch">
+					<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 v-else>{{ title }}</view>
+			</view>
+			<!-- 右边文字 -->
+			<view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		useNavbarStore
+	} from '@/stores/navbarStore';
+	import {
+		ref,
+		watch,
+		onMounted
+	} from 'vue';
+
+	const store = useNavbarStore();
+	const {
+		showBack,
+		rightText,
+		showSearch,
+		title,
+		isTransparent,
+		height,
+		hasPlaceholder
+	} = store;
+
+	const goBack = () => {
+		uni.navigateBack({
+			delta: 1
+		});
+	};
+
+	const onRightTextClick = () => {
+		// 这里可以添加右边文字点击的处理逻辑
+		console.log('右边文字被点击');
+	};
+	const centerContentStyle = ref({});
+
+
+	onMounted(() => {
+		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+		const systemInfo = uni.getSystemInfoSync();
+		const statusBarHeight = systemInfo.statusBarHeight;
+
+		// 计算标题的垂直偏移量
+		const verticalOffset = menuButtonInfo.top - statusBarHeight;
+		const titleHeight = menuButtonInfo.height;
+
+		centerContentStyle.value = {
+			marginTop: `${titleHeight}px`,
+			height: `${titleHeight}px`,
+			lineHeight: `${titleHeight}px`,
+			boxSizing: 'border-box',
+
+		};
+		console.log(centerContentStyle)
+	});
+</script>
+
+<style lang="scss" scoped>
+	.navbar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 6px;
+		z-index: 999;
+
+		.back-icon {
+			cursor: pointer;
+		}
+
+		.center-content {
+			flex: 1;
+			text-align: center;
+
+			.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 {
+					padding-left: 32rpx;
+					padding: 12rpx 120rpx 12rpx 32rpx;
+					height: 100%;
+					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; //溢出不换行
+				}
+			}
+		}
+
+		.right-text {
+			cursor: pointer;
+		}
+	}
+</style>