uni-app原生导航栏不支持下拉菜单，因titleNView为系统级渲染，无法嵌入Vue组件或绑定交互事件；必须通过自定义导航栏（fixed定位view）+ 手动实现下拉逻辑（v-show控制显隐、absolute定位菜单、监听外部点击和滚动收起）来达成，且需针对小程序/H5/App平台分别处理兼容性问题。
uni-app 本身没有内置「导航栏下拉菜单」组件，所谓“在导航栏添加下拉菜单”，实际是自定义导航栏 + 手动实现下拉交互逻辑的组合方案。直接在 nvue 或原生导航栏（titleNView）里加下拉菜单不可行，必须走自定义路线。
为什么不能直接在默认导航栏加下拉菜单
uni-app 的原生导航栏（titleNView）是系统级渲染，不支持嵌入可交互的 Vue 组件，也无法绑定 @click、v-show 或监听滚动/触摸事件。试图往 navigationBarTitleText 里塞 HTML 或用 CSS 伪元素模拟下拉，都会失败或在多端表现不一致。
常见错误现象包括：下拉区域点击无响应、iOS 微信小程序中遮挡、H5 端定位错乱、Android 真机点击穿透到下方内容。
-
navigationStyle: "default"时，整个导航栏被系统接管，无法插入任何 DOM - 即使设为
"custom"，也只是隐藏原生栏，你仍需自己写一个<view>模拟，而这个模拟栏才是下拉菜单的容器 - 所有下拉逻辑（显示/隐藏/定位/收起时机）都得由你手动控制，没有自动锚定或跟随能力
自定义导航栏 + 下拉菜单的最小可行结构
核心思路：用一个固定定位的 <view class="custom-nav"> 替代原生栏，在其右侧区域（比如标题旁）放一个触发按钮，再用另一个 <view class="dropdown-menu"> 作为下拉内容，通过 v-show 或 :class 控制显隐。
关键点在于定位和层级：
- 外层
.custom-nav必须设position: fixed; top: 0; width: 100%; z-index: 999; -
.dropdown-menu需设position: absolute; top: 100%; left: auto; right: 0; z-index: 1000;（右对齐更合理） - 必须加
padding-top: env(safe-area-inset-top)或用<uni-status-bar>占位，否则 iOS 状态栏下会重叠 - 点击空白处关闭菜单，推荐用
@touchstart.capture监听 body 外部点击，而非@click.stop—— 后者在 scroll-view 内易失效
示例片段（简化版）：
<template>
<view class="custom-nav">
<uni-status-bar />
<view class="nav-content">
<text class="nav-title">首页</text>
<view class="nav-more" @click="toggleDropdown">
<uni-icon type="arrowdown" size="16" />
</view>
</view>
<view class="dropdown-menu" v-show="showDropdown">
<view class="dropdown-item" @click="handleSelect('sort')">排序</view>
<view class="dropdown-item" @click="handleSelect('filter')">筛选</view>
</view>
</view>
</template>
小程序平台特别注意的兼容性坑
微信/支付宝/百度小程序对 position: absolute 在 fixed 父容器内的定位支持不一致，尤其当父容器有 transform 或 overflow: hidden 时，下拉菜单可能消失或错位。
- 微信小程序：必须给
.custom-nav加transform: translateZ(0)强制创建新层叠上下文，否则.dropdown-menu可能被裁剪 - 支付宝小程序：
z-index在某些版本中无效，建议改用style="z-index: 9999 !important;"并配合pointer-events: auto - H5 端：若页面用了
scroll-view，下拉菜单必须挂载到<body>下（用teleport），否则会被overflow: hidden截断 - App 端（nvue）：不支持
v-show切换，必须用v-if或:style="{ display: showDropdown ? 'block' : 'none' }"
最易被忽略的是：下拉菜单打开后，用户滚动页面，菜单不会自动收起，也不会跟随滚动 —— 这不是 bug，是预期行为。你要自己监听 onPageScroll 或 @scroll 事件，在滚动开始时强制 showDropdown = false，否则体验极差。
