AlloyTouch之无限循环select插件
来源:互联网 发布:淘宝假学生证怎么办理 编辑:程序博客网 时间:2024/04/27 23:25
写在前面
当滚动的内容很多,比如闹钟里设置秒,一共有60项。让使用者从59ms滚回01ms是一件很痛苦的事情,所以:
在列表项太多的情况下,我们希望能够有个无限循环的滚动。00ms和01ms是无缝链接起来的。如下图所示:
在线演示
http://alloyteam.github.io/AlloyTouch/select/infinite/
插件使用
先引用依赖的JS和CSS文件。
<link rel="stylesheet" href="select.css" /><script src="../../transformjs/transform.js"></script><script src="../../alloy_touch.js"></script><script src="alloy_touch.select.infinite.js"></script>
然后:
var i = 0, options = [];for (; i < 60; i++) { options.push({ value: i, text: i < 10 ? "0" + i+" ms" : i + " ms" });}var iselect = new AlloyTouch.Select({ options: options, selectedIndex: 11, change: function (item, index) { }, complete: function (item, index) { document.body.insertAdjacentHTML("beforeEnd", "<br/>选了第" + index + "项<br/>value:" + item.value + "<br/>text:" + item.text); }})iselect.show();
- options是所有项的集合。上面模拟了60项代表对应的ms
- selectedIndex是初始选中项的索引
- change是改变的回调
- complete是点击完成按钮的回调
核心原理
在看原理之前,我们看下dom里面的属性变化。
new AlloyTouch({ touch: container, target: { y: -1 * preSelectedIndex * step }, property: "y", vertical: true, step: step, change: function (value) { correction(value); }, touchStart: function (evt, value) { }, touchMove: function (evt, value) { }, touchEnd: function (evt, value) { }, tap: function (evt, value) { }, pressMove: function (evt, value) { }, animationEnd: function (value) { }})function correction(value) { value %= scrollerHeight; if (Math.abs(value) > scrollerHeight-90) { if (value > 0) { value -= scrollerHeight; } else { value += scrollerHeight; } } scroll.translateY = value - scrollerHeight;}
可以看到初始化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
你要触摸的一切都在这里。
0 0
- AlloyTouch之无限循环select插件
- AlloyTouch之无限循环select插件
- AlloyTouch之无限循环select插件
- AlloyTouch之无限循环select插件
- AlloyTouch之无限循环select插件
- AlloyTouch之select选择插件
- AlloyTouch之select选择插件
- AlloyTouch之select选择插件
- Prototype插件之无限循环滚动新闻
- UIScrollview之无限循环滚动
- 杂记之C语言之无限循环
- Android进阶2之Gallery无限循环
- Android进阶2之Gallery无限循环
- shell脚本之-无限循环
- Android进阶2之Gallery无限循环
- 无限级分类之循环家谱树
- 无限循环
- 控件一:Gallery 之无限循环的问题
- 多线程_Java程序运行原理和JVM的启动是多线程的吗
- endnote使用笔记
- 腾讯2017暑期实习生编程题-C-有趣的数字
- 大型网站系统学习笔记(一)——单机到集群
- 浅论出版物的纸、电一体化新方向
- AlloyTouch之无限循环select插件
- 用canvas绘制的折线图 +解析
- Nginx-keepalived高可用负载均衡
- JAVA 开发环境搭建
- CSS Background-origin
- 前端经典面试——splice&concat用法详解
- java 读取properties配置文件
- 从浏览器访问一个地址的过程
- C#操作xml