如何制作一个媲美原生体验的选择器
如果无法正常显示，请先停止浏览器的去广告插件。
1. 如何制作一个
媲美原生体验的选择器
卡晨
蚂蚁集团 前端工程师
antd-mobile v5 开发者
2. 选择器 Picker
3. 选择器 Picker
• API 设计
• 手势 & 动画
• 性能
• 无障碍
4. 属性
5. 属性
6. 拆解
7. 拆解
8. 拆解
9. Wheel 拨轮
10. 交互
点击
拖拽
11. 手势 & 动画
12. 手势
13. CSS 动画
14. CSS 动画
15.
16.
17. JS 动画
18. JS 动画
19. JS 动画
20.
21. 级联
22. 级联
23. 级联
24. 级联
25. 级联
弊端
• 理解成本和易于混淆
• columns 属性名不副实
• 过度耦合
26. 重复 ≥ 错误的抽象
27. 日期选择器
28. 性能
29. 性能
30. 性能
31. 性能 - 优化
32. 性能 - 优化
33. 性能 - 优化后
34. 性能 - 渲染对比
优化前
优化后
35. 性能 - 帧率对比
优化前
优化后
36. 无障碍
????????????????????
????????????????????
??
?????????????????????
????????????????????
37.
38.
39.
40. 开源社区
Contributors
50
Pull Requests
325
Commits
460
数据时间范围为 2021 下半年
Issues
416
41. 开源社区
一个人可以走的更快，但一群人可以走的更远
42. antd-mobile
https://github.com/ant-design/ant-design-mobile