uniapp搜索框适配小程序对齐胶囊

本文链接：https://blog.csdn.net/weixin_45788691/article/details/121679738

本文介绍了如何在uniapp框架中创建自定义搜索栏，并使其在微信小程序中与胶囊按钮对齐。关键步骤包括获取胶囊和导航栏的高度，利用CSS布局调整元素位置。代码示例展示了模板、逻辑和样式的实现细节，确保导航栏固定在顶部且不遮挡内容。

摘要由CSDN通过智能技术生成

需求：uniapp框架开发中自定义搜索栏编译微信小程序与适配与其右边胶囊袋对齐！要实现自定义导航栏与胶囊对齐，如下图如示，只需要获取导航栏高度，及导航栏距上的位置（其实就是状态栏高度），再通过css布局就完成任务了。这个方案应该是最简单易懂的方案了。如果有更复杂的布局需要，都以导航容器为基准去扩展就行了。
在这里插入图片描述

视图：

<template>
	<view class="navTab">
		<view class="navTabFixed">
			<view :style="{height:capsuleHeight+'px'}"></view>
			<view class="navTabContent" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
				<view class="navTabSearch">
					<view class="navTabSearchIcon">
						<uni-icons type="search" size="16" color="#999"></uni-icons>
					</view>
					<view class="navTabSerach">
						<input class="navTabSearchText" type="text" v-model="val" placeholder="搜索您想要的好物" />
					</view>
				</view>
			</view>
		</view>
		<view :style="{height: capsuleHeight+navBarHeight+'px'}"></view>
	</view>
</template>

画一个动态胶囊视图，动态获取胶囊高度进行赋值占位！

逻辑：

<script>
	export default {
		name: 'navTab',
		data() {
			return {
				capsuleHeight: 20,
				navBarHeight: 45,
				windowWidth: 375,
				val: '' 
			}
		},
		onLoad(options) {
			const info = uni.getSystemInfoSync()
			this.capsuleHeight = info.capsuleHeight
			this.windowWidth = info.windowWidth
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = (menuButtonInfo.bottom - info.capsuleHeight) + (menuButtonInfo.top - info.capsuleHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		},
		methods: {

		}
	}
</script>

一般来说自定义导航栏是要固定在页面最上面的，所以得有个占位元素来占距位置，不然下面的内容就会被导航栏遮住。所以固定的导航栏外面应该再加个正常容器元素，高度 = 导航栏高度 + 距上。

样式：

<style lang="less" scoped>
	.navTab {
		.navTabFixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			background-color: @mk-base-color;

			.navTabContent {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 30Upx;
				height: 90Upx;
				box-sizing: border-box;

				.navTabSearch {
					display: flex;
					align-items: center;
					padding: 0 20Upx;
					width: 100%;
					height: 60Upx;
					border-radius: 60Upx;
					background-color: #fff;

					.navTabSearchIcon {
						margin-right: 20Upx;
					}

					.navTabSearchText {
						width: 100%;
						font-size: 28Upx;
						color: #999;
					}
				}

				&.search {
					padding-left: 0;

					.navTabContent__search-icons {
						margin-left: 20Upx;
						margin-right: 20Upx;
					}

					.navTabSearch {
						border-radius: 10Upx;
					}
				}
			}
		}
	}
</style>