优先用picker实现简单级联筛选，因其三端一致、性能稳定；复杂多选搜索需改用uni-popup，注意状态同步、防抖过滤及条件安全合并。
uni-app里用picker实现多条件下拉筛选，为什么选它而不是自定义弹窗
picker是uni-app官方支持的原生级组件，iOS/Android/H5三端渲染一致，不依赖JS模拟滚动、不触发页面重排，性能稳；自定义弹窗容易在iOS上出现touch穿透、键盘顶起错位、真机picker遮挡等问题。但它的限制也很明确：只支持单列或级联（mode="multiSelector"或mode="selector"），不能直接做“带搜索+多选+联动”的复杂筛选——这时候就得切换策略。
- 真实场景中，如果只是「城市→区→街道」三级联动，优先用
mode="multiSelector"，数据结构必须是二维数组，比如[["北京","上海"],["朝阳","浦东"],["建国路","陆家嘴"]] - 如果要「多选+确认按钮+非级联」（比如选多个标签、多个状态），
picker就不行了，得切到uni-popup或手写position: fixed层 -
picker在H5端会退化成select，样式不可控，且无法监听滚动中事件，别试图给它加高亮或实时过滤
用uni-popup搭一个可搜索的多条件筛选器，关键三步
uni-popup是uni-app生态里最轻量、兼容性最好的弹出层方案，比自己写v-show + z-index靠谱得多。重点不是“怎么弹出来”，而是“怎么让筛选状态同步回主界面”和“怎么避免重复打开”。
- 弹层内容用
scroll-view包裹，设scroll-y，别用div+overflow: auto，否则iOS滚动卡顿 - 每个筛选项用
checkbox或radio时，绑定的v-model必须是响应式对象里的字段，比如filterForm.status，不要直接绑statusList数组索引 - 搜索输入框加
debounce，uni-app没有内置防抖，建议用setTimeout手动清上一次timer，延迟300ms再执行过滤，不然输入卡顿明显 - 示例片段：
<uni-popup ref="popup" type="bottom"> <view class="popup-content"> <input v-model="searchKey" @input="onSearchInput" placeholder="搜索..."> <scroll-view scroll-y> <label v-for="item in filteredList" :key="item.value"> <checkbox :value="item.value" v-model="filterForm.types">{{item.label}}</checkbox> </label> </scroll-view> </view> </uni-popup>
onConfirm回调里怎么安全合并多组筛选条件
筛选器常有“状态+时间+分类”多组条件，用户可能只改其中一项。直接覆盖this.searchParams = this.filterForm会丢掉未操作字段的原始值，导致请求参数缺失。
- 把筛选表单拆成独立响应式对象，比如
filterForm = { status: [], category: [], timeRange: null }，每个字段初始值设为null或空数组，而非undefined - 提交前用
Object.keys(filterForm).reduce(...)只合并非空/非null字段，避免把timeRange: null也塞进请求 - 时间范围这类复合字段，后端通常要
start_time和end_time两个键，前端存成timeRange: ["2024-01-01", "2024-06-30"]，提交时再解构，别让后端解析数组 - 注意：H5端
uni.showActionSheet和uni.showModal不能嵌套调用，确认筛选后别紧接着弹提示框，先uni.hidePopup()再uni.showToast
真机调试时picker不弹、popup被遮挡的典型原因
这不是代码逻辑问题，而是uni-app生命周期和层级管理的隐性坑。
-
picker在App端必须在onReady之后调用showPicker，onLoad里调用大概率无效；小程序端则要求picker必须在wxml中静态存在，不能v-if控制显隐 -
uni-popup默认z-index是999，但某些UI库（如uView）的tabbar或navbar设了更高z-index，得在popup样式里强制z-index: 9999 - iOS真机上，如果页面用了
transform: translateZ(0)或will-change，会导致popup渲染层错乱，整个弹层变灰或消失，删掉这些CSS声明即可 - 所有弹层类组件，务必在
onUnload里调用this.$refs.popup.close()，否则页面跳走后弹层还挂在内存里，下次进来可能卡死
实际项目里，最常被忽略的是「筛选条件变更后是否触发列表重新加载」——很多人只改了filterForm，忘了watch它并主动调用fetchList()，或者把请求逻辑写在onPullDownRefresh里却没在筛选确认后手动触发。这个点不在UI层，但在交互闭环里最关键。
