目錄
一、子組件代碼
1、完整子組件代碼?
2、子組件配置項(xiàng)Props?
二、父組件引用代碼?
1 、將頭部導(dǎo)航注冊(cè)成全局組件（main.js）
2、獲取設(shè)備信息（App.vue）
3、頁(yè)面導(dǎo)入自定義導(dǎo)航組件
（3-1）、默認(rèn)配置效果圖例
（3-2）、更改配置效果圖例?
一、子組件代碼
1、完整子組件代碼?
<template>
<view class="header-nav-box"
:style="{'height':Props.imgShow?'':Props.statusBarHeight+'px','background':Props.imgShow?'':Props.bgColor||'#9cf'}">
<!-- 是否使用圖片背景 false -->
<image v-if="Props.imgShow||false" :src="imgUrl||'../../static/flower.jpg'" mode="scaleToFill"
style="width: 100%; height: 400rpx;" />
<!-- 導(dǎo)航內(nèi)容 -->
<view class="nav-box-item" :style="{'top':Props.capsuleTop+'px','color':Props.textColor||'#FFF'}">
<view class="back" v-if="Props.blackShow||true" @click="back">
<uni-icons type="back" size="18" :color="Props.iconColor||'#FFF'" />
<block>{{Props.backText||'返回'}}</block>
</view>
<view class="title">
<block>{{title}}</block>
</view>
</view>
<!-- 自定義內(nèi)容插槽 -->
<slot name="content"></slot>
</view>
</template>
<script>
export default {
name: "HeaderNav",
data() {
return {};
},
props: {
Props: {
type: Object,
default: () => {}
},
title: {
type: String,
default: '默認(rèn)標(biāo)題'
}
},
methods: {
// 返回按鈕回調(diào)函數(shù)
back() {
uni.navigateBack({
data: 1
})
this.$emit('back')
}
}
}
</script>
<style lang="scss">
.header-nav-box {
position: relative;
.nav-box-item {
height: 54rpx;
position: absolute;
display: flex;
align-items: center;
font-size: 34rpx;
width: 100%;
.back {
width: 25%;
padding-left: 10rpx
}
.title {
width: 49%;
text-align: center;
}
}
}
</style>
2、子組件配置項(xiàng)Props?
//配置項(xiàng)
Props:{
imgShow: "", //不傳參則默認(rèn)隱藏狀態(tài)(false),且使用默認(rèn)背景色
statusBarHeight: "", //導(dǎo)航高度(動(dòng)態(tài)獲取傳參)
bgColor: "", //導(dǎo)航欄背景色,不傳參則默認(rèn)#9CF
capsuleTop: "", //膠囊頂部距離(動(dòng)態(tài)獲取傳參)
textColor: "", //導(dǎo)航標(biāo)題字體顏色(不傳默認(rèn)#FFF)
iconColor: "", //icon圖標(biāo)顏色(不傳默認(rèn)#FFF)
blackShow: "", //是否顯示返回字體及icon圖標(biāo)(不傳默認(rèn)顯示true)
backText: "", //默認(rèn)字體(返回)
},
title:"默認(rèn)標(biāo)題"http://導(dǎo)航標(biāo)題內(nèi)容(不傳則為默認(rèn)內(nèi)容)?大家可根據(jù)自身項(xiàng)目的業(yè)務(wù)進(jìn)行更改，合理使用，參考寫(xiě)出與自身項(xiàng)目中相符合的寫(xiě)法。也可在配置項(xiàng)中增加自己的想法，或刪減自己認(rèn)為多余的部分，一切根據(jù)自己的想法邏輯去實(shí)現(xiàn)，我這個(gè)只是提供一個(gè)自己所理解的參考寫(xiě)法。
二、父組件引用代碼?
1 、將頭部導(dǎo)航注冊(cè)成全局組件（main.js）
?組件名稱(chēng)可自行命名“HeaderNav”
// 注冊(cè)全局組件
import HeaderNav from "@/components/HeaderNav"
Vue.component("HeaderNav", HeaderNav)2、獲取設(shè)備信息（App.vue）
<script>
export default {
globalData: {
statusBarHeight: "", //導(dǎo)航欄高度
capsuleTop: "", //膠囊距離頂部位置
capsuleHeight: "", //膠囊高度
},
onLaunch: function() {
let custom = uni.getMenuButtonBoundingClientRect() //獲取右上角膠囊信息
let system = uni.getSystemInfoSync() //獲取設(shè)備信息
this.globalData.statusBarHeight = system.statusBarHeight + system.safeArea.top
this.globalData.capsuleTop = custom.top
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每個(gè)頁(yè)面公共css */
</style>
3、頁(yè)面導(dǎo)入自定義導(dǎo)航組件
?當(dāng)前為默認(rèn)導(dǎo)入子組件（配置項(xiàng)參數(shù)為進(jìn)行任何更改）狀態(tài)，默認(rèn)使用背景色#9CF，可自行根據(jù)業(yè)務(wù)需求更改背景色或漸變背景色
<template>
<view id="container">
<HeaderNav :Props="Props" @black="black" />
</view>
</template>
<script>
export default {
data() {
return {
Props: {
imgShow: "", //不傳參則默認(rèn)隱藏狀態(tài)(false),且使用默認(rèn)背景色
statusBarHeight: "", //導(dǎo)航高度(動(dòng)態(tài)獲取傳參)
bgColor: "", //導(dǎo)航欄背景色,不傳參則默認(rèn)#9CF
capsuleTop: "", //膠囊頂部距離(動(dòng)態(tài)獲取傳參)
textColor: "", //導(dǎo)航標(biāo)題字體顏色(不傳默認(rèn)#FFF)
iconColor: "", //icon圖標(biāo)顏色(不傳默認(rèn)#FFF)
blackShow: "", //是否顯示返回字體及icon圖標(biāo)(不傳默認(rèn)顯示true)
backText: "", //默認(rèn)字體(返回)
}
}
},
onLoad() {
this.Props.statusBarHeight = getApp().globalData.statusBarHeight
this.Props.capsuleTop = getApp().globalData.capsuleTop
},
methods: {
black() {
console.log("返回上一頁(yè)回調(diào)事件");
}
}
}
</script>
<style lang="scss" scoped>
#container {}
</style>
（3-1）、默認(rèn)配置效果圖例
（3-2）、更改配置效果圖例?
使用背景圖頭部導(dǎo)航效果?，僅配置部分參數(shù)，剩余參數(shù)配置根據(jù)需求配置，部分配置項(xiàng)代碼如下；
<HeaderNav :title="title" :Props="Props" @black="black" />title: "我的導(dǎo)航", Props: { imgShow: true, //不傳參則默認(rèn)隱藏狀態(tài)(false),且使用默認(rèn)背景色 statusBarHeight: "", //導(dǎo)航高度(動(dòng)態(tài)獲取傳參) bgColor: "", //導(dǎo)航欄背景色,不傳參則默認(rèn)#9CF capsuleTop: "", //膠囊頂部距離(動(dòng)態(tài)獲取傳參) textColor: "", //導(dǎo)航標(biāo)題字體顏色(不傳默認(rèn)#FFF) iconColor: "", //icon圖標(biāo)顏色(不傳默認(rèn)#FFF) blackShow: "", //是否顯示返回字體及icon圖標(biāo)(不傳默認(rèn)顯示true) backText: "后退", //默認(rèn)字體(返回) }
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-771569.html
完成上述步驟，即可得到一個(gè)簡(jiǎn)易的頭部導(dǎo)航子組件的封裝啦，大家可根據(jù)自己項(xiàng)目需求更改，直接copy即可使用，簡(jiǎn)單易上手。傻瓜式寫(xiě)法?。?！各位大佬小聲噴哈，哈哈哈哈。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-771569.html
到了這里，關(guān)于uni-app自定義微信小程序頭部導(dǎo)航欄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
