AlloyTouch之select选择插件

原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Simple-Select

写在前面

不少状况下，产品但愿统一安卓和IOS select交互和样式。可是众所周知，IOS和安卓的select唤起的选择界面并非样的，甚至IOS不一样系统版本以及安卓不一样系统版本下的select唤起的界面也不是相同的。并且省市区多选的需求，无论是IOS和安卓都没有提供原生界面的支持。因此惟一的办法就是web去模拟select唤起界面。

如上图因此，中间的区域是支持触摸运动。什么触摸运动？AlloyTouch不就是专门干这个的吗！
可是须要停在某个日期上！什么须要停在某个日期上？AlloyTouch不是能够配置step的吗！

全部问题迎刃而解~

在线演示

alloyteam.github.io/AlloyTouch/…

插件使用

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

核心原理

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也会回弹。

总结

能够看到，AlloyTouch很擅长处理触摸运动。固然上面只是一个简单的例子，这仅仅是一个开始！

后续还会给你们带来：

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

Github

github.com/AlloyTeam/A…

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