AlloyTouch之select選擇外掛

當耐特發表於2019-02-18

寫在前面

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

AlloyTouch之select選擇外掛

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

所有問題迎刃而解~

線上演示

AlloyTouch之select選擇外掛

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

你要觸控的一切都在這裡。

相關文章