目覚まし時計の秒数の設定など、スクロールする内容が多い場合は、合計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 は変更のコールバックです
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;}
補正を使用して、鼓動サイクルの効果を生み出します。 (注: 値は 1 サイクル分ジャンプしますが、DOM レンダリングのパフォーマンスではジャンプを認識できません)
ここで、target は y 属性を含む
オブジェクト リテラル、scroll は、transfrom プロパティと混合されたスクロール オブジェクトです。垂直方向の変位は、scroll.translateY を通じて直接設定できます。
フォローアップでは次の内容も得られます:
以上がAlloyTouch 無限ループ選択プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。