注：仅作学习记录
需求：在导航栏处可以做类似下拉选择的操作
问题：高度 ？ 遮罩 ？
需要的效果图：
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生效
效果：
大体结构如下：
