當耐特

寫在前面

很多情況下，產品希望統一安卓和IOS select交互和樣式。但是眾所周知，IOS和安卓的select喚起的選擇界面并不是樣的，甚至IOS不同系統版本以及安卓不同系統版本下的select喚起的界面也不是相同的。而且省市區多選的需求，不管是IOS和安卓都沒有提供原生界面的支持。所以唯一的辦法就是web去模擬select喚起界面。

如上圖所以，中間的區域是支持觸摸運動。什么觸摸運動？AlloyTouch不就是專門干這個的嗎！
但是需要停在某個日期上！什么需要停在某個日期上？AlloyTouch不是可以配置step的嗎！

所有問題迎刃而解~

在線演示

http://alloyteam.github.io/AlloyTouch/select/simple/

插件使用

先引用依賴的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

https://github.com/AlloyTeam/AlloyTouch

你要觸摸的一切都在這里。