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

前に書いてください

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

オンラインデモ

http://www.php.cn/

プラグインは

最初にを使用し、依存する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の

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

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 を通じて直接設定できます。

概要

回転 360 は周期を自動的に処理しないため、モーション オブジェクト リテラル {y:xx} を独自に使用し、修正をスクロール オブジェクトのtranslateY にマッピングして周期性を制御します。

フォローアップでは次の内容も得られます:

• AlloyTouch の複数のカスケード選択の練習

• AlloyTouch で 3D 効果の選択の練習を実現します

以上がAlloyTouch 無限ループ選択プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。