HTML5技术

AlloyTouch之无限循环select插件 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2017-03-03 14:01 我要评论( )

写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项。让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动。00ms和01ms是无缝链接起来的。如下图所示: 在线演示 插件使用 先引用依赖的JS和CSS

写在前面

当滚动的内容很多,比如闹钟里设置秒,一共有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来控制周期性。
后续还会给大家带来:

  • AlloyTouch多项级联select实战
  • AlloyTouch实现3D效果select实战
  • Github

    https://github.com/AlloyTeam/AlloyTouch

    你要触摸的一切都在这里。
    

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • AlloyTouch之select选择插件 - 【当耐特】

      AlloyTouch之select选择插件 - 【当耐特】

      2017-02-28 11:01

    • 车大棒浅谈for循环+canvas实现黑客帝国矩形阵 - 车大棒

      车大棒浅谈for循环+canvas实现黑客帝国矩形阵 - 车大棒

      2017-01-18 15:01

    • AlloyTouch实现下拉刷新 - 【当耐特】

      AlloyTouch实现下拉刷新 - 【当耐特】

      2017-01-10 13:01

    • AlloyTouch实战--60行代码搞定QQ看点资料卡 - 【当耐特】

      AlloyTouch实战--60行代码搞定QQ看点资料卡 - 【当耐特】

      2016-12-29 16:00

    网友点评