Plug-in de sélection de boucle infinie AlloyTouch

Écrivez devant

Lorsqu'il y a beaucoup de contenu défilant, comme le réglage des secondes dans un réveil, il y a 60 éléments au total. Il est très pénible pour les utilisateurs de revenir en arrière de 59 ms à 01 ms, donc :
Lorsqu'il y a trop d'éléments de liste, nous espérons avoir un défilement boucle infini. 00 ms et 01 ms sont parfaitement liés. Comme indiqué ci-dessous :

Démo en ligne

//m.sbmmt.com/

Le plug-in utilise

d'abord pour référencer les fichiers JS et CSS dépendants .

<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>

Alors :

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();

• les options sont l'ensemble de toutes articles . Les 60 éléments simulés ci-dessus représentent le ms

• selectedIndex correspondant est le index de l'élément sélectionné initial

• le changement est modifié Le rappel

• complete est le rappel en cliquant sur le bouton d'achèvement

Principe de base

Avant en regardant le principe, regardons les changements dans l'attribut dans le 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;}

Vous pouvez voir qu'il n'y a pas de paramètres min et max lors de l'initialisation de l'instance AlloyTouch, car il n'est pas nécessaire de rebond.
Utilisez la correction pour produire l'effet de cycles de battement. (Remarque : bien que la valeur saute d'un cycle, les performances de rendu dom ne peuvent pas voir le saut)
où la cible est un objet littéral contenant l'attribut y, et
le défilement fait défiler l'objet a été mélangé avec les propriétés associées de transfrom, de sorte que son déplacement vertical peut être défini directement via scroll.translateY.

Résumé

Étant donné que la rotation à 360° ne gère pas automatiquement le cycle, nous passons nous-mêmes le littéral de l'objet de mouvement {y:xx}, puis le mappons à celui de l'objet de défilement. se traduit par une correction pour contrôler la périodicité.
Nous vous apporterons également le suivi :

• Pratique de sélection en cascade multiple d'AlloyTouch

• AlloyTouch réalise la pratique de sélection d'effets 3D

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!