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

先来看效果：

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

代码实现：

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

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

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

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

CSS代码：

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 给页面主体内容留出空间，避免被导航栏遮挡。