uniapp有自帶的自定義頭部導(dǎo)航，但是又是滿足不了我們的需求，就需要我們?nèi)プ远x導(dǎo)航。

首先要把原來(lái)的navigationStyle設(shè)置為custom，去除自帶的頭部導(dǎo)航。在pages.json文件里，

{
            "root" : "doctorPage/",
            "pages" : [
                {
                    "path" : "doctorDetails/doctorDetails",
                    "style" : {
                        "navigationBarTitleText" : "專家詳情",
                        "enablePullDownRefresh" : false,
                        "navigationStyle" : "custom"
                    }
                }
            ]
        },

創(chuàng)建一個(gè)組件，在需要的頁(yè)面進(jìn)行引用，

我是在components文件里創(chuàng)建了navBar文件。

?下面是navBar的代碼

<template>
	<view class="navbar" :style="{height:statusBarHeight+navBareight +'px'}"> <!-- 如若不寫(xiě) 高度始終為44 沒(méi)有找到原因 -->
		<view class="narbar-flexd">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="narbar-content" :style="{height:navBareight+'px'}" >
				
				<!-- 左側(cè)返回按鈕 -->
				<view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop}]">
					<uni-icons type="arrowleft" size="25" :color='color' ></uni-icons>
					<!-- <u--image :showLoading="true" src="https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/indexs/lianxi.png" width="60rpx" height="71rpx" @click="click"></u--image> -->
				</view>
				<view class="title">
					{{title}}
				</view>
			</view>
		</view>
		<view class="navHeight" :style="{height:statusBarHeight+navBareight +'px'}"></view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				statusBarHeight:20,
				navBareight: 45,
				windowWidth: 375,
			};
		},
		props:{
			title:{ // 標(biāo)題文字(默認(rèn)為空)
				type:String,
				default:'#fff'
			},
			color:{ // 標(biāo)題和返回按鈕顏色(默認(rèn)白色)
				type:String,
				default:'#fff'
			},
		    //建議使用background  因?yàn)槭褂胋ackgroundColor，會(huì)導(dǎo)致不識(shí)別漸變顏色
			background:{ // 背景顏色(不傳值默認(rèn)透明)
				type:String,
				default:'transparent'
			},
			back:{ // 是否顯示返回按鈕(不傳值默認(rèn)不顯示)
				type:Boolean,
				default:false
			},
		},
		
		created() {
			//獲取手機(jī)系統(tǒng)信息 -- 狀態(tài)欄高度
			let {
				statusBarHeight,
				windowWidth
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.windowWidth = windowWidth
			//去除
			//#ifndef H5 || MP-ALIPAY ||APP-PLUS
			//獲取小程序膠囊的高度
			let {
				top,
				bottom,
				left
			} = uni.getMenuButtonBoundingClientRect()
			//高度 =（膠囊底部高低-狀態(tài)欄高度）+（膠囊頂部高度-狀態(tài)欄內(nèi)的高度）
			this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight)
			this.windowWidth = left
			//#endif
		},
		
		methods: {
			// 左側(cè)返回按鈕調(diào)用
			onBack() {
				this.$emit("onBack");
				uni.navigateBack({
						delta:1,//返回層數(shù)，2則上上頁(yè)
			    })
				
			}
		}
		
	}
</script>
 
<style lang="scss">
	.navbar {
		background-image: url('https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/index/90.png') !important;
		background-size: 100% 100% !important;
		.narbar-flexd {
			background-image: url('https://bsl-lj-rent.oss-cn-shanghai.aliyuncs.com/idn-mac/index/90.png') !important;
			background-size: 100% 100% !important;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			// padding-bottom: 10rpx;
			.narbar-content {
				// height: 45px;
				padding: 0 30px;
				// margin-bottom: 10px;
				display: flex;
				box-sizing: border-box;
				justify-content:center;
				align-items: center;
				.left{
					position: absolute;
					left: 5%;
					font-weight: 600;
				}
				.title{
					font-size: 16px;
					color: #fff;
					font-weight: 600;
				}
				
			}
 
			
		}
		.navHeight {
			height: 60px;
		}
	}
</style>

在頁(yè)面中使引入

??

?效果

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-777541.html

?當(dāng)然如果你不需要返回按鈕，不要添加back就可以了。

?

如果要添加其他的，如輸入框，就可以模仿返回按鈕。?

?

到了這里，關(guān)于uniapp微信小程序自定義導(dǎo)航，標(biāo)題和小膠囊平行的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！