1 - uni.scss的主题色变量

这就是设置主题色变量。

2 - 设置自定义导航栏的样式

这里就是css基本功了。

导航栏的高度基本就是45px。

	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			/*层级控制*/
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 15px;
			width: 100%;
			height: 45px;
			background-color: $mk-base-color;
			box-sizing: border-box;

			/* 让下面的元素在盒内显示 */
			.navbar-search {
				display: flex;
				align-items: center;
				padding: 0 10px;
				width: 100%;
				height: 30px;
				border-radius: 30px;
				background-color: #fff;

				.navbar-search_icon {
					width: 10px;
					height: 10px;
					border: 1px red solid;
					margin-right: 10px;
				}

				.navbar-search_text {
					font-size: 12px;
					color: #999;
				}
			}
		}
	}

这个样式是有对应的html代码的：

<template>
	<view class="navbar">
		<view class="navbar-fixed">
			<view class="navbar-search">
				<view class="navbar-search_icon"></view>
				<view class="navbar-search_text">uniapp、vue</view>
			</view>
			<!-- 下面的45px元素是为了将内容挤下去 -->
			<view style="height: 45px;"></view>
		</view>
	</view>
</template>

3 - 自定义导航栏的小技巧

第一，自定义导航栏是要固定定位的。

第二，如果只有固定定位，我们通过z-index进行了层级控制。

那么导航栏是会覆盖掉我们的内容的。像是下面的样子。

第三，小技巧就是添加一个元素来在文档流当中挤一下一个45px的位置，把内容往下挤挤。

导航栏是飘在文档流的上方的嘛，就是固定定位的嘛。

效果就是下面的样子的：

这样就实现了一个基础的自定义导航栏