uniapp微信小程序自定义导航栏

效果如下：

重点在于pages.json文件里的这个配置开启自定义导航栏:"navigationStyle": "custom",

	"pages": [
		{
			"path" : "pages/index/index",
			"style" : 
			{
				"navigationStyle": "custom",
				"enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#fff", // 顶部背景颜色
				"onReachBottomDistance": 100
			}
		},
    ]

navbar组件

<template>
	<view style="position: sticky;top: 0;background-color: #fff;z-index:10;">
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action" @tap="BackPage" v-if="isBack">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				// var CustomBar = this.CustomBar;
				var CustomBar = 0;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
		},
		methods: {
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>

页面中引用组件

<template>
	<view class="box">
		<Navbar class="navBox" bgColor="bg-gradual-blue" :isBack="false">
			<view class="tab" slot="content">
				<view @click="change(0)" :style="{'background-color':!active ?'#1989fa':'#fff','color':!active ? '#fff':'#1989fa'}" class="tabItem">
					<van-icon name="clock-o" style="margin-right: 10px;"/>待报价
				</view>
				<view @click="change(1)" :style="{'color':!active ? '#1989fa':'#fff','background-color':!active ? '#fff':'#1989fa'}" class="tabItem">
					<van-icon name="todo-list-o" style="margin-right: 10px;"/>历史
				</view>
			</view>
		</Navbar>
		<AgentList @handle="handle"  ref="agentList" @toast="toast" v-show="!active"/>
		<AllList  @handle="handle"   ref="allList" @toast="toast" v-show="active"/>
		<van-toast id="van-toast" />
		<van-tabbar active="{
   
   { tabbarActive }}" @change="onChange" style="z-index: 60;">
		  <van-tabbar-item icon="orders-o">业务入口</van-tabbar-item>
		  <van-tabbar-item icon="manager-o">用户中心</van-tabbar-item>
		</van-tabbar>
	</view>
</template>

		change(event){
			this.active = event
			if(uni.getStorageSync("allListRefresh")&&this.active){
				this.$refs.allList.getList();
				uni.removeStorageSync("allListRefresh")
			}
		},

<style lang="less">
.tab{
	width: 220px;
	padding: 7px 0;
	display: flex;
	text-align: center;
	margin:0 10px;
	font-size: 14px;
	.tabItem{
		flex: 1;
		border-radius: 20px;
		padding: 2px;
		line-height: 24px;
		border: 1px #1989fa solid;
		margin-right: 5px;
	}
}
</style>