uni-app搜索导航栏组件

骑猪看日落 2022-10-08 00:55 204阅读 0赞

![20210619140000538.png][]

<template>
    	<view class="navbar">
    		<view class="navbar-fixed">
    			
    			<view :style="{height: statusBarHeight+'px'}"></view>
    			
    			<view class="navbar-content" :style="{height:navbarHeight+'px',width:windowWidth+'px'}">
    				<view class="navbar-search">
    					<view class="navbar-search-icon">
    						<uni-icons type="search" size="20" color="#999"></uni-icons>
    					</view>
    					<view class="navbar-search-text">uni-app</view>
    				</view>
    			</view>
    		</view>
    		
    		<view :style="{height:(statusBarHeight + navbarHeight)+'px'}"></view>
    	</view>
    </template>
    
    <script>
    	export default {
    		name: "navbar",
    		data() {
    			return {
    				statusBarHeight: 20,
    				navbarHeight: 45,
    				windowWidth: 375
    			};
    		},
    		// 组件加载
    		created() {
    			// 同步获取手机系统信息
    			let info = uni.getSystemInfoSync()
    			console.log(info);
    			// 动态设置状态栏高度
    			this.statusBarHeight = info.statusBarHeight
    			// 设置搜索框的宽度
    			this.windowWidth = info.windowWidth
    
    			/* 条件编译 不等于这三个平台 , 只会在微信小程序,QQ,百度小程序运行*/
    			// #ifndef H5 || MP-ALIPAY || APP-PLUS
    			/* 动态设置导航栏的高度 */
    			// 获取胶囊位置
    			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    			console.log(menuButtonInfo);
    			// 导航栏高度 = (胶囊底部 - 状态栏高度) + (胶囊顶部 - 状态栏高度)
    			this.navbarHeight = (menuButtonInfo.bottom - this.statusBarHeight) + (menuButtonInfo.top - this
    				.statusBarHeight)
    			console.log(this.navbarHeight);
    			// 设置搜索框的宽度
    			this.windowWidth = menuButtonInfo.left
    			// #endif
    		}
    	}
    </script>
    
    <style lang="scss">
    	.navbar {
    		.navbar-fixed {
    			// 固定定位
    			position: fixed;
    			top: 0;
    			left: 0;
    			z-index: 999;
    			width: 100%;
    			background-color: $mk-base-color;
    
    			.navbar-content {
    				display: flex;
    				// 水平居中
    				justify-content: center;
    				// 垂直居中
    				align-items: center;
    				padding: 0 15px;
    				// 盒内显示 (父元素和子元素宽度都是100%,但是父元素加了左右内填充,会导致子元素不在父元素内)
    				box-sizing: border-box;
    
    				.navbar-search {
    					display: flex;
    					// flex-direction默认水平排列
    					flex-direction: row;
    					// 垂直居中
    					align-items: center;
    					height: 30px;
    					width: 100%;
    					border-radius: 30px;
    					padding: 0 10px;
    					background-color: #FFFFFF;
    
    					.navbar-search-icon {
    						margin-right: 10px;
    					}
    
    					.navbar-search-text {
    						font-size: 12px;
    						color: #999;
    					}
    				}
    			}
    		}
    	}
    </style>

[20210619140000538.png]: /images/20221005/9eaa6594eeae40fb8ead7ec5859ff6ce.png