AlloyTouch无限循环select插件

来源：懂视网责编：小采时间：2020-11-27 20:24:12

AlloyTouch无限循环select插件

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

推荐度：

点击下载本文 文档为doc格式

导读AlloyTouch无限循环select插件:写在前面当滚动的内容很多，比如闹钟里设置秒，一共有60项。让使用者从59ms滚回01ms是一件很痛苦的事情，所以：在列表项太多的情况下，我们希望能够有个无限循环的滚动。00ms和01ms是无缝链接起来的。如下图所示：在线演示http://www.gxlcms.com

写在前面

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

在线演示

http://www.gxlcms.com/

插件使用

先引用依赖的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 设置其垂直方向上的位移。