AlloyTouch 無限ループ選択プラグイン-jsチュートリアル-php.cn

AlloyTouch 無限ループ選択プラグイン

PHPz

リリース： 2017-03-12 16:01:06

オリジナル

1287 人が閲覧しました

前に書いてください

目覚まし時計の秒数の設定など、スクロールする内容が多い場合は、合計60項目あります。ユーザーにとって、59 ミリ秒から 01 ミリ秒までスクロールバックするのは非常に苦痛です。そのため、
リスト項目が多すぎる場合は、無限ループスクロールができるようにしたいと考えています。 00msと01msはシームレスにリンクされています。以下の図に示すように:

AlloyTouch 無限ループ選択プラグイン

オンラインデモ

AlloyTouch 無限ループ選択プラグイン

//m.sbmmt.com/

プラグインは

最初にを使用し、依存する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 はすべての項目のセットです。上記は、対応する ms を表す 60 個の項目をシミュレートしています
selectedIndex は最初に選択された項目のインデックスです
change は変更のコールバックです
complete は完了ボタンをクリックしたときのコールバックです

中心原理

原理を見る前に、domの

属性の変化を見てみましょう。

AlloyTouch 無限ループ選択プラグイン

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 パラメーターが存在しなくなっていることがわかります。

補正を使用して、鼓動サイクルの効果を生み出します。 (注: 値は 1 サイクル分ジャンプしますが、DOM レンダリングのパフォーマンスではジャンプを認識できません)
ここで、target は y 属性を含む
オブジェクトリテラル、scroll は、transfrom プロパティと混合されたスクロールオブジェクトです。垂直方向の変位は、scroll.translateY を通じて直接設定できます。