当前位置：首页 > news >正文

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

news 来源：原创 2025/6/20 12:06:35

先来看效果：

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

代码实现：

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

<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代码：

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