app端自定义下拉选择面板动画必须绕开原生picker，改用popup+transition模拟；核心是用弹层容器配合css动画实现入场/出场效果，并注意滚动兼容性、性能优化及ios手势陷阱。
App端自定义下拉选择面板动画必须绕开原生picker
uni-app 的 picker 组件在 App 端（iOS/Android）无法实现真正意义上的“自定义动画下拉面板”，它本质是调用系统原生控件，样式和动效完全不可控。想做带入场/出场动画、渐变、缩放、遮罩层过渡的下拉选择，必须放弃 picker，改用弹层 + 列表组合方案。
常见错误现象：mode="selector" 或 mode="multiSelector" 下拉后无动画、点击无反馈、H5 和 App 表现不一致、iOS 上弹出位置偏移。
- 所有平台中，只有 App 端能通过原生容器支持「物理拖拽感」，但仅限于页面级下拉刷新（
onPullDownRefresh），不适用于选择器 - H5 和小程序的
picker是平台强管控组件，连z-index都无法穿透，更别说自定义动画 - 所谓“自定义 picker 动画”，实际都是用
popup/uni-popup或view+v-if模拟出来的视觉效果
用 popup + transition 实现可配置的下拉动画面板
核心思路是：把选择列表包裹进一个弹层容器，用 Vue 的 <transition></transition> 控制显隐，再配合 CSS 动画定义入场/退场效果。uni-app 支持原生 <transition></transition>，无需额外插件。
使用场景：城市选择、分类筛选、多选标签弹窗、带搜索框的下拉菜单。
- 弹层容器推荐用
<uni-popup></uni-popup>（需安装@dcloudio/uni-ui），它自带type="bottom"且支持animation属性；若不想引入 UI 库，直接用<view v-if="showPopup"></view>+<transition name="slide-fade"></transition>更轻量 - CSS 动画关键点：
transform: translateY()控制垂直位移，opacity控制透明度，transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94)模拟自然回弹 - 必须监听点击遮罩层或取消按钮时触发
showPopup = false，否则动画只播一次就卡住 - Android 真机上若出现弹层闪动，加
style="backface-visibility: hidden"到弹层根元素
scroll-view 内嵌下拉面板的滚动兼容性陷阱
如果下拉面板放在 <scroll-view></scroll-view> 内部（比如作为某个列表项的展开控件），会遇到滚动冲突——手指滑动时可能误触发面板关闭，或面板内列表无法滚动。
常见错误现象：下拉面板一打开就自动收起、内部 checkbox 点击无响应、iOS 上 touchmove 被 scroll-view 拦截。
- 给面板容器加
catchtouchmove="true"（H5/小程序有效），App 端需在<scroll-view></scroll-view>上设enhanced="true"并配合ref手动 stopPropagation - 避免在
scroll-view内使用position: fixed定位面板，改用position: absolute+ 动态计算top值（用uni.createSelectorQuery()获取触发元素位置） - 面板内容超过一屏时，内部再套一层
<scroll-view scroll-y></scroll-view>，并设style="max-height: 300rpx"防止撑爆父容器 - 慎用
bind:touchend关闭面板——用户快速滑动时容易误判，建议用@click.capture监听遮罩层点击更可靠
动画细节与性能避坑点
自定义动画不是加个 transition 就完事。真实项目里最容易被忽略的是动效节奏、状态同步和低端机卡顿。
- 入场动画延迟别超过 0.35s，否则用户感知为“卡顿”；退场动画建议比入场快 20%，比如入场 0.3s，退场 0.24s
- 面板打开后禁止背景滚动：App 端需调
uni.pageScrollTo({scrollTop: 0})锁定，H5 端加document.body.style.overflow = 'hidden' - 选项数量 > 50 条时，务必启用虚拟滚动（如
uni-list的render-virtual）或分页加载，否则首次渲染卡顿明显 - 动画过程中不要触发 setData 或频繁修改响应式数据，尤其避免在
@transitionend里立即发起接口请求——iOS Webview 下容易丢事件
最麻烦的其实是 iOS 上的 touch 事件穿透和 scroll-view bounce 行为，一旦涉及手势混合，就得手动管理 touchstart/touchmove/touchend 三个阶段的状态机，而不是依赖单一 click 事件。
