AlloyTouch之無限迴圈select外掛

當耐特發表於2017-03-03

寫在前面

當滾動的內容很多，比如鬧鐘裡設定秒，一共有60項。讓使用者從59ms滾回01ms是一件很痛苦的事情，所以：
在列表項太多的情況下，我們希望能夠有個無限迴圈的滾動。00ms和01ms是無縫連結起來的。如下圖所示：

AlloyTouch之無限迴圈select外掛

線上演示

AlloyTouch之無限迴圈select外掛

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.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是點選完成按鈕的回撥

核心原理

在看原理之前，我們看下dom裡面的屬性變化。

AlloyTouch之無限迴圈select外掛 

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

總結

因為不是旋轉360自動會處理週期，我們自己通過運動物件字面量{y:xx}，然後通過correction對映到滾動物件的translateY來控制週期性。
後續還會給大家帶來：

  • AlloyTouch多項級聯select實戰
  • AlloyTouch實現3D效果select實戰

Github

github.com/AlloyTeam/A…

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

本文對你有幫助？歡迎掃碼加入前端學習小組微信群：

AlloyTouch之無限迴圈select外掛

相關文章