picker不适合商品列表多条件筛选，因其在h5端样式不可控、无搜索功能，小程序中仅返回索引且不支持多列独立操作；应改用uni-popup+scroll-view实现可搜索、状态独立、防抖高亮的弹层筛选，并注意键盘遮挡、滚动穿透及页码重置等细节。
为什么 picker 不适合商品列表的多条件筛选
直接用 picker 做「状态+分类+价格区间」这类组合筛选，会在 H5 端退化成原生 <select></select>，样式完全不可控，也没法加搜索框、关键词高亮、自定义图标；小程序里虽能用，但 @change 只返回索引（比如 e.detail.value === 0），你得自己查 range 数组才知道选的是“待发货”还是“已取消”，多组条件一混就容易串。更麻烦的是，它不支持多列独立操作——你没法让“分类”和“品牌”两个下拉同时展开互不影响。
用 uni-popup + scroll-view 搭可搜索的弹层筛选
核心不是“怎么弹出来”，而是状态怎么独立、滚动怎么不卡、搜索怎么不卡顿。真实项目里，推荐这套最小可行组合：
-
scroll-view必须包裹弹层内容并设scroll-y，别用div+overflow: auto，否则 iOS 滚动明显卡顿 - 每个筛选项用独立
v-model绑定，例如v-model="filterForm.category"，不要绑categoryList[0]这种数组索引 - 搜索输入框必须加防抖：用
setTimeout清上一次 timer，延迟 300ms 再执行filteredOptions计算，否则快速打字会卡死 - 高亮关键词用
String.prototype.replace()+ 正则：label.replace(new RegExp(`(${search})`, 'ig'), '<strong>$1</strong>')，注意大小写忽略
onConfirm 里怎么安全合并筛选条件
很多人点确认后直接 this.searchParams = this.filterForm，结果用户只改了“分类”，其他字段（比如“时间范围”）变成 undefined，JSON.stringify 后被删掉，后端收不到空数组语义。关键在初始化和合并逻辑：
- 把筛选表单声明为响应式对象：
filterForm = { category: [], status: [], priceRange: null } - 每个字段初始值必须是
[]或null，不能是undefined - 提交前做显式判断：
if (filterForm.category.length) params.category = filterForm.category，避免空数组被当成 false 丢弃 - 确认后调用
this.$refs.popup.close()，别依赖 v-model 自动关闭，某些平台会延迟触发
iOS 键盘遮挡和滚动穿透怎么破
这是自定义弹层最常翻车的点：点击搜索框拉起键盘，弹层被顶出可视区；滚动弹层时页面也跟着动；点完选项键盘不自动收起。几个硬性约束：
- 弹层内
input要加confirm-type="search"，iOS 下可触发键盘搜索按钮，点它自动收起键盘 - 弹层容器加
style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"，避免被页面滚动影响 - 弹层内部禁用
pageScroll：在uni-popup上加:disable-scroll="true"，防止滚动穿透到背景页 - 手动控制键盘：在
input的@focus里调用uni.hideKeyboard()，再延时 100ms 调用scroll-view的scrollIntoView对齐焦点位置
onReachBottom 和筛选确认回调里，得同步处理。
