AlloyTouch之select選擇插件

寫在前面

不少狀況下，產品但願統一安卓和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

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