uniapp实战 —— 自定义顶部导航栏

朝阳392023-12-11 5:02

效果预览

下图中的红框区域

范例代码

src\pages.json

配置隐藏默认顶部导航栏

json 复制代码

     "navigationStyle": "custom", // 隐藏默认顶部导航

src\pages\index\components\CustomNavbar.vue

封装自定义顶部导航栏的组件（要点在于：获取屏幕边界到安全区域距离）

html 复制代码

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

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <view class="logo">
      <!-- <image class="logo-image" src="@/static/images/logo.jpg"></image> -->
      <text class="logo-title">DOS圆梦大家庭</text>
      <text class="logo-text">诚挚缘分 成就梦想</text>
    </view>
  </view>
</template>

<style lang="scss">
.navbar {
  background-image: url(@/static/images/navigator_bg.png);
  background-size: cover;
  display: flex;
  .logo {
    display: flex;
    align-items: center;
    height: 86rpx;
    padding: 20rpx;
    .logo-image {
      width: 40rpx;
      height: 40rpx;
    }
    .logo-title {
      font-size: 32rpx;
      color: #fff;
      font-weight: bold;
    }
    .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;
    }
  }
}
</style>

src\pages\index\index.vue

在目标页面中导入使用

js 复制代码

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

html 复制代码

<CustomNavbar />