Uniapp自定义导航栏

1.准备 自定义 导航栏组件

&lt;template&gt;
  <view class="navbar"&gt;
    <view class="logo"&gt;
      <image class="logo-image" src="@/static/logo.png"&gt;</image&gt;
    </view&gt;
    <!-- 搜索条 --&gt;
    <view class="search">
      <text class="icon-search">搜索商品</text>
      <text class="icon-scan"></text>
    </view>
  </view>
</template>

<style lang="scss">
/* 自定义导航栏样式 */
    <!-- 略-->
</style>

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

// src/pages.json
{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom", // 隐藏默认导航
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "首页"
  }
}

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

不同手机的安全区域不同，为防止页面内容被遮挡,通过 uni.getSyste mInf oSync() 获取屏幕边界到安全区的距离

<script>
  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <!-- 顶部占位 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- ...省略 -->
  </view>
</template>