最稳方案是用 uni-data-select 配合 disabled 占位项模拟分组标题，全端兼容；避免自定义下拉因软键盘导致的滚动穿透等问题；分类标签应使用 u-tabs 等组件实现，与下拉筛选解耦；数据需扁平化并显式声明 :disabled-field，小程序必须设置 :popup="true"。
直接用 uni-data-select 搭配分类占位数据 + 手动 patch 分组结构，是最稳的方案。官方组件本身不支持原生分组标题，但通过插入 disabled: true 的占位项就能模拟出“收支/转账/红包”这类分类头，且 H5、小程序（基础库 ≥ 2.10.3）、App 全端可用。
为什么不用自定义 input + list 模拟下拉？
iOS 下软键盘弹起后常导致滚动穿透、z-index 失效、点击空白无法收起面板；安卓部分机型也会触发 focus/blur 误判。你花半天调样式和事件阻断，不如直接用 uni-data-select 配好 :popup="true" 和 :disabled-field="'disabled'" —— 它内部已处理了 touchmove 阻断、键盘收起逻辑、以及小程序端的 v-model:show 绑定。
怎么让“收入/支出/转账”变成可点击的分类标签？
这不是下拉框该干的事，uni-data-select 是单选/多选筛选器，不是顶部 Tab 栏。真要实现支付宝那种顶部分类标签 + 列表联动，得用 u-tabs 或 uni-tab-bar 单独控制：
- 顶部用
u-tabs渲染['全部', '收入', '支出', '转账']，绑定v-model="activeTab" - 列表数据按
activeTab过滤，比如list.filter(i => !activeTab || i.type === activeTab) - 下拉框仍保留（比如按“账户”或“时间”筛选），和 Tab 逻辑解耦，避免状态混乱
分类数据怎么塞进 uni-data-select？
它只认扁平数组，每项必须有 value 和 text 字段，分类标题得靠 disabled 占位项“伪装”：
[
{ value: 'all', text: '全部' },
{ value: '', text: '收入类', disabled: true },
{ value: 'salary', text: '工资' },
{ value: 'bonus', text: '奖金' },
{ value: '', text: '支出类', disabled: true },
{ value: 'food', text: '餐饮' },
{ value: 'transport', text: '交通' }
]
关键点：
- 传给
:localdata的必须是数组，不是对象；传错会直接导致搜索失效 -
:disabled-field="'disabled'"必须显式声明，否则占位项仍可点击 - 数据量超 200 条时，别忘了加
:lazy-load="true"并监听@loadmore做分页
最易被忽略的是：小程序端不写 :popup="true"，点开后 touchmove 会穿透到底层页面滚动；H5 端则默认正常。这个开关看似可选，实为跨端一致性刚需。
