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

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

一、沉浸式导航栏设置

1. 在pages.json中配置页面样式

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

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

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

2. 在页面中设置导航栏高度

   • 在页面的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;
     }

二、自定义导航栏组件

1. 创建自定义导航栏组件
   • 在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>

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

   <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>
   

通过以上步骤，就可以在 UniApp 中实现沉浸式导航栏和自定义导航栏组件。可以根据实际需求调整导航栏的样式和功能。