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

uniapp沉浸式导航栏+自定义导航栏组件

article 2025/2/1 0:57:45

在 UniApp 中实现沉浸式导航栏并结合自定义导航栏组件

一、沉浸式导航栏设置

在pages.json中配置页面样式

在需要设置沉浸式导航栏的页面的style选项中进行如下配置：

{
  "pages": [
    {
      "path": "pages/pageName/pageName",
      "style": {
        "navigationStyle": "custom", // 自定义导航栏样式
        "app-plus": {
          "titleNView": false, // 关闭默认导航栏
          "statusbar": {
            "background": "#yourColor" // 设置状态栏颜色，与导航栏颜色一致可实现沉浸式效果
          }
        }
      }
    }
  ]
}

将yourColor替换为你想要的颜色值，通常与导航栏颜色一致，以实现沉浸式效果。

在页面中设置导航栏高度

在页面的onLoad生命周期函数中获取设备信息，计算导航栏高度并设置给页面的样式。

export default {
  data() {
    return {
      navHeight: 0
    };
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.navHeight = systemInfo.statusBarHeight + 44; // 44 为通常情况下导航栏的高度，可根据实际调整
  }
};

在页面的style中使用计算出的导航栏高度：

    .page-content {
       padding-top: {{navHeight}}px;
     }

二、自定义导航栏组件

创建自定义导航栏组件
- 在components目录下创建一个名为customNavbar的文件夹，并在其中创建customNavbar.vue文件。

<template>
     <view class="custom-navbar">
       <view class="left-icon" @click="goBack">
         <!-- 左箭头图标 -->
         <icon name="arrow-left" />
       </view>
       <text class="title">{{title}}</text>
       <view class="right-icon" v-if="showRightIcon">
         <!-- 右侧图标 -->
         <icon name="more" />
       </view>
     </view>
   </template>

   <script>
   export default {
     props: {
       title: {
         type: String,
         default: ''
       },
       showRightIcon: {
         type: Boolean,
         default: false
       }
     },
     methods: {
       goBack() {
         uni.navigateBack();
       }
     }
   };
   </script>

   <style scoped>
  .custom-navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 44px;
     background-color: #yourColor; // 与沉浸式导航栏颜色一致
     padding: 0 16px;
   }
  .left-icon {
     width: 44px;
     height: 44px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
  .title {
     flex: 1;
     text-align: center;
     font-size: 18px;
     color: #fff;
   }
  .right-icon {
     width: 44px;
     height: 44px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   </style>

在页面中使用自定义导航栏组件

在需要使用自定义导航栏的页面中引入并注册组件：

<template>
  <view>
    <customNavbar :title="pageTitle" :showRightIcon="true" />
    <!-- 页面内容 -->
  </view>
</template>

<script>
import customNavbar from '@/components/customNavbar/customNavbar.vue';

export default {
  components: {
    customNavbar
  },
  data() {
    return {
      pageTitle: '页面标题'
    };
  }
};
</script>