uni-app微信小程序商城-自定义导航栏

## 自定义导航栏

::: tip 操作步骤

1. 准备组件静态结构

2. 修改页面配置，隐藏默认导航栏，修改文字颜色

3. 样式适配 -> 安全区域

:::

**静态结构**

新建业务组件：`src/pages/index/componets/CustomNavbar.vue`

```vue

<script setup lang="ts">

//

</script>

<template>

  <view class="navbar">

    <!-- logo文字 -->

    <view class="logo">

      <image class="logo-image" src="@/static/images/logo.png"></image>

      <text class="logo-text">新鲜 · 亲民 · 快捷</text>

    </view>

    <!-- 搜索条 -->

    <view class="search">

      <text class="icon-search">搜索商品</text>

      <text class="icon-scan"></text>

    </view>

  </view>

</template>

<style lang="scss">

/* 自定义导航条 */

.navbar {

  background-image: url(@/static/images/navigator_bg.png);

  background-size: cover;

  position: relative;

  display: flex;

  flex-direction: column;

  padding-top: 20px;

  .logo {

    display: flex;

    align-items: center;

    height: 64rpx;

    padding-left: 30rpx;

    padding-top: 20rpx;

    .logo-image {

      width: 166rpx;

      height: 39rpx;

    }

    .logo-text {

      flex: 1;

      line-height: 28rpx;

      color: #fff;

      margin: 2rpx 0 0 20rpx;

      padding-left: 20rpx;

      border-left: 1rpx solid #fff;

      font-size: 26rpx;

    }

  }

  .search {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 10rpx 0 26rpx;

    height: 64rpx;

    margin: 16rpx 20rpx;

    color: #fff;

    font-size: 28rpx;

    border-radius: 32rpx;

    background-color: rgba(255, 255, 255, 0.5);

  }

  .icon-search {

    &::before {

      margin-right: 10rpx;

    }

  }

  .icon-scan {

    font-size: 30rpx;

    padding: 15rpx;

  }

}

</style>

```

**导入组件**

导入业务组件：

<script setup lang="ts">

//导入组件

import CustomNavbar from './components/CustomNavbar.vue'

</script>

**运用组件**

<template>

  <CustomNavbar />

  <view class="index">index</view>

</template>

发现与默认导航栏重复需隐藏默认导航栏

修改pages.json文件

 "path": "pages/index/index",

      "style": {

        "navigationStyle": "custom",隐藏默认导航栏

        "navigationBarTitleText": "首页"

      }