写在前面
当滚动的内容很多,比如闹钟里设置秒,一共有60项。让使用者从59ms滚回01ms是一件很痛苦的事情,所以:
在列表项太多的情况下,我们希望能够有个无限循环的滚动。00ms和01ms是无缝链接起来的。如下图所示:
先引用依赖的JS和CSS文件。
然后:
options iii i)iselect .options(item(itemindex ..) iselect.show();
核心原理在看原理之前,我们看下dom里面的属性变化。
containerpreSelectedIndex step(value) (evt(evt(evt(evt(evt(value) ) function correction(value) { value (value > 0) { value value .
可以看到初始化AlloyTouch实例的时候已经不存在min和max的参数,因为不需要回弹。
通过correction去产生跳动周期的效果。(注意:虽然值会跳一个周期,但是dom的渲染表现是看不出跳动的)
其中target是一个包含y属性的对象字面量,
scroll是滚动的对象,被mix过transfrom的相关属性,所以可以直接通过scroll.translateY 设置其垂直方向上的位移。
因为不是旋转360自动会处理周期,我们自己通过运动对象字面量{y:xx},然后通过correction映射到滚动对象的translateY来控制周期性。
后续还会给大家带来:
https://github.com/AlloyTeam/AlloyTouch
你要触摸的一切都在这里。