uni-app项目实战笔记16--实现头部导航栏效果

先来看效果：

要求：顶部导航栏要始终固定在上方，不随页面上下拖动而消失。

代码实现：

1.定义一个自定义导航栏组件：custom-nav-bar.vue，并写入如下代码：

html 复制代码

<template>
	<view class="layout">
		<view class="navBar">
			<view class="statusBar">
				
			</view>
			<view class="titleBar">
				<view class="title">标题</view>
				<view class="search">
					<uni-icons class="icon" type="search" color="#888" size="18"></uni-icons>
					<text class="text">搜索</text>
				</view>
			</view>
		</view>
		<view class="fill">
			
		</view>
	</view>
</template>

上面的代码定义了状态栏，标题栏的布局，其中：

1.状态栏主要显示时间、手机剩余电量等信息；

2.标题栏：实现搜索框，标题的效果。

CSS代码：

css 复制代码

<style lang="scss">
  .layout{
	 .navBar{
		 position: fixed;
		 top:0;
		 left: 0;
		 width: 100%;
		 z-index: 10;
		 background:
		 linear-gradient(to bottom,transparent,#fff 400rpx ),
		 linear-gradient(to right,#beecd8 20%,#F4E2d8);
		 .statusBar{}
		 .titleBar{
			 display: flex;
			 padding: 0 30rpx;
			 align-items: center;
			
			 .title{
				 font-size: 32rpx;
				 font-weight: 700;
				 color:$text-font-color-1;
			 }
			 .search{
				 width: 220rpx;
				 height: 50rpx;
				 border-radius: 60rpx;
				 background: rgba(255,255,255,0.4);
				 border: 1px solid #fff;
				 margin-left: 30rpx;
				 color:#999;
				 font-size: 28rpx;
				 display: flex;
				 align-items: center;
				 .icon{
					 margin-left: 5rpx;
				 }
				 .text{
					 padding-left: 10rpx;
					 
				 }
			 }
		 }
	 } 
  }
</style>

CSS代码知识概要：

1、固定定位 (position: fixed)

导航栏会脱离文档流，始终固定在浏览器窗口的指定位置，不随页面滚动而移动。

2、紧贴顶部和左侧 (top: 0; left: 0)

导航栏会固定在浏览器窗口的最顶部（top: 0），并且从最左侧开始布局（left: 0）。

3、全宽度 (width: 100%)

导航栏会横向撑满整个屏幕宽度，覆盖整个视窗的顶部区域。

4、层级较高 (z-index: 10)

导航栏会显示在普通元素（z-index 默认是 auto 或 0）的上方，确保它不会被其他内容遮挡，同时可以覆盖下方的滚动内容。

实际应用场景：

适用于网页的顶部导航栏（如菜单栏、搜索栏、标题栏等）。

常见于移动端或单页应用（SPA），确保导航始终可见，方便用户操作。

通常配合 padding-top 或 margin-top 给页面主体内容留出空间，避免被导航栏遮挡。