html没有原生，所谓picker实际是用html+css+js模拟或调用type="date"等原生控件唤起系统滚轮；手写需用transform: translatey()+触摸事件实现惯性吸附滚动。
HTML里没有原生<input type="picker">，别白费劲找
浏览器标准 HTML 不提供滚动选择式 picker 弹窗（比如 iOS 那种滚轮选择年月日、城市、选项的控件）。你查 MDN、翻 HTML5 规范，<input> 支持的 type 值里压根没有 picker。所谓“HTML 做 picker”，实际是用 HTML + CSS + JavaScript 模拟行为，或调用平台原生控件（如 <input type="date"> 在 iOS 上会唤起滚轮日期选择器，但样式和交互不可控）。
常见误区是以为加个 role="picker" 或自定义属性就能触发系统弹窗——不会。它只是语义标记，不带功能。
用<input type="date">等原生控件是最轻量的“伪picker”方案
如果你只需要选日期、时间、邮箱、电话等有明确格式的值，优先用原生 input 类型。它们在移动端（尤其 iOS/Android）会自动唤起系统级滚动选择器，无需 JS，兼容性好，且可访问性天然支持。
-
<input type="date">：iOS 呈现为三列滚轮（年/月/日），Android 表现因厂商而异（部分为日历，部分为滚轮） -
<input type="time">：通常为小时/分钟双滚轮 -
<input type="number" min="1" max="100">：部分 Android 会出增减按钮，但不是滚轮；想强制滚轮？做不到 - 注意：
type="month"、type="week"支持度低，iOS Safari 目前不支持month滚轮
缺点也很明显：无法自定义选项（比如“北京/上海/广州”这种枚举），不能改样式，也不能控制弹出时机（只能点击触发）。
手写滚动 picker 必须用transform: translateY() + touchmove事件
真要实现可配置的滚动选择器（如城市选择、商品规格），核心是“容器固定高度 + 内容垂直排列 + 手势拖动 + 惯性吸附”。关键不在 HTML 结构，而在 JS 对 touch 事件的处理逻辑：
- 用
<div class="picker"> <div class="picker__mask"></div> <ul class="picker__list"><li>选项1</li></ul> </div>这类结构，.picker__list高度远超容器，靠overflow: hidden截断显示 - 监听
touchstart记录初始 Y 坐标；touchmove时计算偏移，用transform: translateY(...)实时移动列表（不要用top，性能差） - 松手（
touchend）后根据速度做惯性滑动，并用Math.round(itemHeight * n)吸附到最近选项中心位置 - 别忘了禁用默认滚动：
touchmove里加event.preventDefault()，否则页面会跟着动
直接操作 DOM 的 scrollTop 在 iOS 上卡顿严重，且无法触发硬件加速；用 transform 是唯一靠谱路径。
用现成库时重点看它是否支持cancelable 和onConfirm回调
像 van-picker（Vant）、weui-picker、@vant/picker 这类 UI 库封装得不错，但集成时容易忽略两个关键点：
- 确认/取消按钮是否可配置：有些库只暴露
onChange，没onCancel，导致用户点了遮罩层关闭后你收不到通知，状态残留 - 是否支持异步加载选项：比如“省→市→区”三级联动，第二级数据要等第一级选完才请求，库得允许你在
onChange里更新columns并重置位置 - 滚动阻尼是否可调：iOS 默认滚动很“跟手”，但 Web 实现常过快或过慢，检查库是否有
swipeDuration或friction参数 - 别直接
import 'vant/lib/picker'，按需引入，否则打包体积暴涨
最麻烦的其实是键盘与 picker 共存场景：比如一个表单既有文本输入框又有 picker，iOS 下软键盘弹出会把 picker 顶出视口，这时需要监听 window.visualViewport?.addEventListener('resize', ...) 做适配——这点几乎没人提，但上线后必踩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
