1.uniapp 自定义导航栏以及适配小程序

1.新建一个目录，并新建组件和同名目录

2. 一般导航栏的高度就是45px,差不多就可以

CSS样式

.navbar{
	.navbar-fixed{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	width: 100%;
	background: #f07373;
	.content-search{
	height: 45px;
	display: flex;
	 justify-content: center;
	align-items: center;
	input{width: 70%;
	background: lightgoldenrodyellow;
	font-size: 14px;text-align: center;border-radius: 20px;}
		}
		
	}
}

效果如下：

 二、根据设备不同，状态栏的高度也就不同

在create 函数里写上

三、给胶囊做适配(动态导航栏高度）

HTML 代码：