本文介绍了如何使用cocos2d-js 3.0框架，用JavaScript编写一个模拟iOS时间选择器的组件。内容包括组件功能分析、设计选择、避免继承ScrollView的考虑以及使用ccui::Layout作为核心，通过_bMoveing和_bTouching标识处理触摸移动逻辑，实现循环滚动和自动平衡。最后，讨论了代码实现和平台适应性。
使用引擎：cocos2d-js 3.0
使用语言：javascript
运行平台：手机web
---------------------------------------------------------------
初步分析：
操作过程：
滑动，转动，放缓速度，平衡，停止。
时间选择器的功能分析：
1. 滑动
2. N个选项结果（eg. 0~10）
3. 部分数字可见
4. 根据最近原则，自动平衡到结果item
5. ...
--------------------------------------------------------------------
于是我们立刻面临两种选择，一种是继承ScrollView的做法，一种是使用ClippingNode自己造轮子。
我们如果选择继承的做法，那么无疑工作量会比较多（修改ScrollView逻辑流程）。
其实循环滚动的逻辑一点也不复杂，我们没必要去使用任何已有的滑动类控件，无论是扩展性还是运行效率，这个轮子自己造才是最好的选择。
那么我们使用ClippingNode？
不是！而是使用ccui::Layout。最终我选择它的原因是，它不需要设置stencil，直接一句话即可设置成为裁剪（setClippingEnabled），减少子父节点坐标计算的复杂性。
--------
UI如下：
--------
--------
核心点：
--------
最低0.47元/天 解锁文章
扫一扫
625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
