AlloyTouch之select选择插件【分分快三计划】

作者:分分快三计划

在线演示

分分快三计划 1

Github

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

总结

因为不是旋转360自动会处理周期,我们自己通过运动对象字面量{y:xx},然后通过correction映射到滚动对象的translateY来控制周期性。
后续还会给大家带来:

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

插件使用

先引用依赖的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.js"></script>

然后:

new AlloyTouch.Select({
    options: [
        { value: "all", text: "累计" },
        { value: "2015-9", text: "2015年9月" },
        { value: "2015-8", text: "2015年8月" },
        { value: "2015-7", text: "2015年7月" },
        { value: "2015-6", text: "2015年6月" },
        { value: "2015-5", text: "2015年5月" },
        { value: "2015-4", text: "2015年4月" },
        { value: "2015-3", text: "2015年3月" },
        { value: "2015-2", text: "2015年2月" },
        { value: "2015-1", text: "2015年1月" },
        { value: "2014-12", text: "2014年12月" },
        { value: "2014-11", text: "2014年11月" },
        { value: "2014-10", text: "2014年10月" }
    ],
    selectedIndex: 3,
    change: function (item, index) {
    },
    complete: function (item, index) {
    }
})
  • options是所有项的集合
  • selectedIndex是初始选中项的索引
  • change是改变的回调
  • complete是点击完成按钮的回调

Github

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

在线演示

分分快三计划 2

写在前面

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

分分快三计划 3

写在前面

很多情况下,产品希望统一安卓和IOS select交互和样式。但是众所周知,IOS和安卓的select唤起的选择界面并不是样的,甚至IOS不同系统版本以及安卓不同系统版本下的select唤起的界面也不是相同的。而且省市区多选的需求,不管是IOS和安卓都没有提供原生界面的支持。所以唯一的办法就是web去模拟select唤起界面。

分分快三计划 4

如上图所以,中间的区域是支持触摸运动。什么触摸运动?AlloyTouch不就是专门干这个的吗!
但是需要停在某个日期上!什么需要停在某个日期上?AlloyTouch不是可以配置step的吗!

所有问题迎刃而解~

核心原理

在看原理之前,我们看下dom里面的属性变化。

分分快三计划 5

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

核心原理

Transform(scroll);
new AlloyTouch({
    touch: container,
    target: scroll,
    initialValue: selectedIndex * -1 * step,
    property: "translateY",
    min: (len - 1) * -30,
    max: 0,
    step: step
});
  • container是触摸的区域
  • scroll就是滚动的对象
  • step就是每一个日期的高度
  • initialValue是初始的位置,会根据当前的索引selectedIndex乘以step计算出位置

通过上面的配置,scroll最终都会被校正到step的整数倍,小于min会回弹,大于max也会回弹。

插件使用

先引用依赖的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是点击完成按钮的回调

总结

可以看到,AlloyTouch很擅长处理触摸运动。当然上面只是一个简单的例子,这仅仅是一个开始!

后续还会给大家带来:

  • AlloyTouch无限循环select实战
  • AlloyTouch多项级联select实战
  • AlloyTouch实现3D效果select实战

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划