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 中实现沉浸式导航栏和自定义导航栏组件。可以根据实际需求调整导航栏的样式和功能。