uni-app自定义微信小程序头部导航栏

目录

一、子组件代码

1、完整子组件代码

2、子组件配置项Props

二、父组件引用代码

1 、将头部导航注册成全局组件（main.js）

2、获取设备信息（App.vue）

3、页面导入自定义导航组件

（3-1）、默认配置效果图例

（3-2）、更改配置效果图例

一、子组件代码

1、完整子组件代码

2、子组件配置项Props

//配置项
Props:{
imgShow: "", //不传参则默认隐藏状态(false),且使用默认背景色
statusBarHeight: "", //导航高度(动态获取传参)
bgColor: "", //导航栏背景色,不传参则默认#9CF
capsuleTop: "", //胶囊顶部距离(动态获取传参)
textColor: "", //导航标题字体颜色(不传默认#FFF)
iconColor: "", //icon图标颜色(不传默认#FFF)
blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
backText: "", //默认字体(返回)
},
title:"默认标题"//导航标题内容(不传则为默认内容)

大家可根据自身项目的业务进行更改，合理使用，参考写出与自身项目中相符合的写法。也可在配置项中增加自己的想法，或删减自己认为多余的部分，一切根据自己的想法逻辑去实现，我这个只是提供一个自己所理解的参考写法。

二、父组件引用代码

1 、将头部导航注册成全局组件（main.js）

组件名称可自行命名“HeaderNav”

// 注册全局组件
import HeaderNav from "@/components/HeaderNav"
Vue.component("HeaderNav", HeaderNav)

2、获取设备信息（App.vue）

3、页面导入自定义导航组件

当前为默认导入子组件（配置项参数为进行任何更改）状态，默认使用背景色#9CF，可自行根据业务需求更改背景色或渐变背景色

（3-1）、默认配置效果图例

（3-2）、更改配置效果图例

使用背景图头部导航效果，仅配置部分参数，剩余参数配置根据需求配置，部分配置项代码如下；

title: "我的导航",
Props: {
	imgShow: true, //不传参则默认隐藏状态(false),且使用默认背景色
	statusBarHeight: "", //导航高度(动态获取传参)
    bgColor: "", //导航栏背景色,不传参则默认#9CF
    capsuleTop: "", //胶囊顶部距离(动态获取传参)
    textColor: "", //导航标题字体颜色(不传默认#FFF)
    iconColor: "", //icon图标颜色(不传默认#FFF)
    blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
    backText: "后退", //默认字体(返回)
}