uniapp自定义导航栏

注：仅作记录

需求：在导航栏处可以做类似下拉选择的操作
问题：高度 ？ 遮罩 ？
需要的效果图：

1、先自定义了 navbar ，大致结构：

<u-navbar title=" " :placeholder='true' :border='true'>
        <view class="u-nav-slot" slot="left" @click="goBack">
		<u-icon name="arrow-left" size="19"></u-icon>
	</view>
	<view class="u-nav-slot nav_center" slot="center" @click="openCenter">
		<text class="nav-txt"> {{navTitle}} </text>
		<image class="nav_down_img" src="@/static/images/app/serve/com_down.png" mode=""></image>
	</view>
</u-navbar>

效果如下：

2、下拉选择的操作，用的弹出层，大致结构：

<u-popup class="popupView" :show="show" @close="show=false" mode="top"
 :round="12" :safeAreaInsetBottom='false'>
	<view class="nav_select"> // 这个盒子要根据导航栏定位
		<view class="select_up" @click="selectClick">
			<text :class=" clickShow? 'select_txt' :'select_up_txt'"> 收到的评论 </text>
			<image
			 v-show="clickShow" 
			class="nav_select_img" src="@/static/images/app/serve/com_select.png"
			 mode="">
			 </image>
		</view>
		<view class="nav_xian"></view>
		<view class="select_up" @click="selectClickDown">
			<text :class=" clickShowDown? 'select_txt' :'select_up_txt'"> 发出的评论 </text>
			<image
			 v-show="clickShowDown"
			  class="nav_select_img"
			  src="@/static/images/app/serve/com_select.png"
			 mode=""></image>
		</view>
	</view>
</u-popup>

但是，效果是这样的：

解决顶部高度问题：

• 在data里，statusBarHeight:wx.getSystemInfoSync().statusBarHeight
• 然后，给 nav_select 这个盒子，动态给高
• <view class="nav_select" :style="{top:(statusBarHeight+44)+'px'}">

然后，效果是这样的：

处理遮罩：
又给 navbar 套一层盒子，给这个盒子设置 z-index ，要添加定位 z-index生效

效果：

大体结构如下：