uniapp使用vue3语法构建自定义导航栏，适配小程序胶囊

具体代码

	<view v-if="isCustom" class="nav-content-container" :style="'height:'+navContentHeight +'px;'">
		<slot name="left">
		</slot>
		<slot name="middle"> </slot>
		<view :style="'width:'+navPaddingRight+'px;'+'height:40px'"></view>
	</view>
	<view v-else class="nav-content-container" :style="'height:'+navContentHeight +'px;'">
		<image v-if="!isInTab" class="nav-content-left" src="../../static/back.png" mode="widthFix"
			@click="handleClickBack" />
		<view class="nav-content-middle">
			<text>{{titleText}}</text>
		</view>
	</view>
	<slot name="bottom" :style="'height:'+bottomComponentHeight +'px;'"></slot>
</view>

使用方法：
使用默认配置：

<navbar titleText="这是标题"></navbar>

使用自定义插槽：

		<navbar :isCustom="true" @init-height="initNavHeight" data-eventsync="true" bottomComponentHeight="45">
			<template v-slot:left>
				<image class="nav-content-left" src="../../static/back.png" mode="widthFix" @click="handleClickBack" />
			</template>
			<template v-slot:middle>
				<view class="search-bar-middle" @click="handlerClickSearch()">
					<image src="../../static/search.png" mode="widthFix" style="width: 24rpx"></image>
					<text class="search-bar-middle-text">搜索内容、体系、文章</text>
				</view>
			</template>
			<template v-slot:bottom>
				<classify-menu-bar :tabArr="tabArr" @on-change-tab="onChangeTab" class="classify-top-container"></classify-menu-bar>
			</template>
		</navbar>

一共有三个插槽：
● left: 左侧
● middle：居中
● bottom：固定底部 （需用传递属性,作为底部buttom的高度）