当滚动的内容很多,比如闹钟里设置秒,一共有 60 项。让使用者从 59ms 滚回 01ms 是一件很痛苦的事情,所以:
在列表项太多的情况下,我们希望能够有个无限循环的滚动。00ms 和 01ms 是无缝链接起来的。如下图所示:
先引用依赖的 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();
在看原理之前,我们看下 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 来控制周期性。
后续还会给大家带来:
你要触摸的一切都在这里。
来源: http://www.cnblogs.com/iamzhanglei/p/6495578.html