résumé
Cette version d'Iscroll 4 réécrit entièrement le code d'origine du cadre Iscroll. Ce projet a été entièrement créé en raison de l'utilisation généralisée des navigateurs de webkit mobiles (comme iPhone, iPad, Android)
Une façon localisée de faire glisser le contenu d'un élément qui définit la hauteur et la largeur est fournie. Malheureusement, dans ce cas, toutes les pages de toutes les applications Web ne peuvent pas contenir un en-tête, une fin de page ou un contenu défilement avec position: Absolute.
Zone centrale.
Cependant, la dernière révision du système Android peut déjà prendre en charge cette fonctionnalité (bien que le support ne soit pas particulièrement bon), et Apple semble réticent à appliquer l'événement de diapositive à un doigt à l'élément DIV.
En plus des caractéristiques des versions précédentes d'Iscroll, Iscroll 4 comprend également les fonctionnalités suivantes:
(1) Zoom (pincement / zoom)
(2) Tirez / vers le bas pour actualiser
(3) Amélioration de la vitesse et des performances
(4) capturer avec précision les éléments
(5) barre de défilement personnalisée
Conseils amicaux: Iscroll 4 n'est pas une alternative simple à Iscroll 3, et la documentation de l'API est déjà différente. Étant donné que cette version est en version bêta, certaines API peuvent avoir des changements mineurs.
Guide de l'utilisateur
Dans ce document, vous trouverez de nombreux exemples pour vous apprendre à démarrer rapidement avec la bibliothèque de scripts Iscroll. Il peut être un peu ennuyeux de se référer à l'exemple de démonstration de l'article et de lire attentivement ce document, mais cet article est l'essence de la bibliothèque de scripts Iscroll.
ISCROLL doit initialiser les éléments pour être défilés et ne limite pas le nombre d'éléments en utilisant ISCROLL dans une page (votre configuration matérielle n'est pas prise en compte ici). Le type et la longueur du contenu dans l'élément de défilement affecteront la bibliothèque de script ISCroll dans une certaine mesure
Le nombre d'éléments qui peuvent être utilisés simultanément.
Lors de l'utilisation de la bibliothèque de scripts ISCroll, la structure de l'arborescence DOM doit être suffisamment simple pour supprimer les balises inutiles et essayer d'éviter une nidification excessive des balises.
La structure optimale de l'utilisation d'ISCroll est la suivante:
<div id = "wrapper"> <ul> <li> </li> ...... </ul> </div>
Dans ce petit exemple, la balise UL sera défilée. ISCROLL doit être connecté à l'emballage à l'extérieur du contenu de défilement pour produire des résultats.
【Précautions】:
Seul le premier élément enfant de l'emballage peut être défilé. Si vous voulez que plus d'éléments défilent, vous pouvez essayer la méthode d'écriture suivante:
<div id = "wrapper"> <div id = "Scroller"> <ul> <li> </li> ... </ul> <ul> <li> </li> ... </ul> </div> </div>
Dans cet exemple, l'élément de défilement peut être défilé même s'il contient deux éléments UL
ISCROLL doit être instancié avant d'appeler, vous pouvez instancier Iscroll dans les cas suivants:
(1) Utilisez l'événement onDomContent pour réaliser un défilement
Convient pour le contenu de défilement ne contient que du texte et des images, et toutes les images ont des tailles fixes
<script src = "iscroll.js"> </ script> <cript> var myscroll; fonction chargé () {myscroll = new isCroll ("wrapper"); } window.addeventListener ("DomContentloaded", chargé, false); </cript>Remarque: la variable MyScroll est globale, vous pouvez donc l'appeler n'importe où
(2) Utilisez l'événement Onload pour réaliser le défilement
Étant donné que l'événement téléchargé DomContent sera appelé après le chargement de la structure DOM, la longueur et la largeur de la zone de défilement ne peuvent pas être déterminées avant que des éléments tels que les images ne soient pas chargés. À l'heure actuelle, l'événement Onload peut être implémenté.
<script src = "iscroll.js"> <cript> <cript> var myscroll; fonction chargé () {setTimeout (function () {myscroll = new isCroll ("wrapper");}, 100); } window.addeventListener ("charger", chargé, false); </cript>Dans ce cas, ISCROLL sera initialisé après que les ressources de la page (y compris les images) sont chargées de 100 ms. Cela devrait être un moyen relativement sûr d'appeler Iscroll.
(3) initialisation de la ligne
Cette situation sera appelée lorsque la page sera chargée dans JS. Cette méthode n'est pas recommandée, mais de nombreux bigwigs JavaScript utilisent cette méthode. Quelle raison dois-je être en désaccord?
<script src = "iscroll.js"> </ script> <div id = "wrapper"> <ul> <li> </li> ... </ul> </div> <script> var myscroll = new isCroll ("wrapper"); </cript>Cependant, il est recommandé d'utiliser certaines méthodes Ready Framework pour appeler en toute sécurité Iscroll (comme Ready () dans jQuery).
Paramètres passés dans Iscroll
Le deuxième paramètre d'Iscroll vous permet de personnaliser du contenu, comme le code suivant:
<script> var myscroll = new isCroll ("wrapper", {hscrollbar: false, vscrollbar: false}); </script>Le deuxième paramètre est généralement un objet. Par exemple, la barre de défilement ne s'affiche pas dans l'exemple ci-dessus. Les paramètres couramment utilisés sont les suivants:
HSCROLL FAUX interdit le défilement horizontal
VSCROLL FAUX REFINE REFINE REMBRALL VRAI TRUE SCOLL VERTICAL DEMAL
HSCROLLBAR FALSE HIDES CRIARS SCORDA
VSCROLLBAR FAUX MIDE SCROLL SCROLL dans le sens vertical
Correction de barrette sur le système iOS, lorsque la traînée des éléments dépasse la limite du défilement, la barre de défilement rétrécit. Réglé sur true pour empêcher la barre de défilement de dépasser le paramètre.
La zone visible du défilement. La valeur par défaut est vraie sur Android et False sur iOS
Fadescrollbar Faux spécifie pour masquer les barres de défilement lorsqu'il n'y a pas d'effet de décoloration
Hidescrollbar cache la barre de défilement lorsqu'il n'y a pas d'interaction utilisateur par défaut
Bounce Activer ou désactiver le rebond des limites, par défaut
Momentum permet ou désactive l'inertie, par défaut, ce paramètre est très utile lorsque vous souhaitez enregistrer des ressources.
LockDirection False annule le verrouillage de la direction de traînée, la vraie traînée ne peut être que dans une seule direction (haut / bas ou gauche / droite)
Réalisation de divers effets
Faites défiler la démo de rafraîchissement
Cet effet est devenu très populaire depuis que Twitter et certaines applications locales Apple sont apparues. Vous pouvez jeter un œil ici.
Dans la dernière version, l'auteur sépare la pièce "Pull to Refrex" en tant que plug-in supplémentaire pour ISCroll. Vous pouvez cliquer ici pour voir comment fonctionne Pull to Refresh. Tout ce que vous avez à faire est de personnaliser la méthode PullDownAction (). Vous avez peut-être besoin de Ajax pour charger un nouveau contenu, mais n'oubliez pas d'appeler Rafesh une fois l'arborescence DOM change. Il faut se rappeler que dans l'exemple, nous avons ajouté un retard de 1 seconde pour simuler l'effet de retard du réseau. Bien sûr, si vous ne souhaitez pas utiliser ce retard, supprimez simplement la méthode Settimeout.
Zoom (pincement / zoom) 'Tirez pour actualiser'
Nous devons faire face au fait que le simple fait de rouler n'est en fait rien de nouveau. C'est pourquoi dans cette version d'Iscroll 4, nous vous permettons de le mettre
Grand et rétrécissement. Pour souhaiter cette fonction, il vous suffit de définir le paramètre Zoom sur True pour utiliser les gestes pour zoomer et sortir. Vous pouvez jeter un œil ici.
Le double-cliquez pour zoomer et sortir est également pris en charge dans ISCROLL 4. Pour utiliser la fonction Zoom, vous avez besoin au moins de la configuration suivante:
var myscroll = new isCroll ("wrapper", {zoom: true});
Si vous souhaitez personnaliser la fonction de zoom en profondeur, vous pouvez utiliser certaines des options suivantes:
ZOOMMAX Spécifie le multiple maximum qui permet le grossissement, la valeur par défaut est 4
[Notes]: Si vous voulez que la mise à l'échelle de l'image soit efficace, vous devez les mettre dans la couche de synthèse matérielle. En termes de laïque, il s'agit d'utiliser -webkit-transform: tradlate3d (0,0,0) sur tous les éléments IMG qui doivent être mis à l'échelle. Et il est particulièrement important que l'accélération matérielle prenne beaucoup de ressources et doit être utilisée avec prudence, sinon votre application peut s'écraser.
SCIPE et SCH à l'élément Demo 'Carrousel'
La fonction SNAP consiste à déterminer si l'élément glisse à la position spécifiée. Cet effet vous permet de créer un effet de chapiteau de fantaisie.
Le plug-in analysera automatiquement les éléments de la même étiquette ou de la même taille dans la zone de défilement que l'objet Capture, et vous pouvez également spécifier l'objet capturé via des paramètres.
var myscroll = new isCroll ("wrapper", {snap: true, momentum: false, hscrollbar: false, vscrollbar: false});Vous pouvez définir l'objet Snap en définissant le paramètre SNAP sur la balise spécifiée. Par exemple, capturez l'étiquette Li.
var myscroll = new isCroll ("wrapper", {snap: "li", momentum: false, hscrollbar: false, vscrollbar: false});Dans cet exemple, le paramètre peut capturer l'élément Li le plus à gauche dans la zone de défilement
Bars de défilement personnalisés
Dans Iscroll 4, une série de CSS peut être utilisée pour personnaliser le rendu des barres de défilement. Vous pouvez ajouter un paramètre de classe à la barre de défilement, comme suit:
var myscroll = new isCroll ("wrapper", {scrollBarclass: "myscrollbar"});Il convient de noter que la barre de défilement est composée de deux éléments: le conteneur et l'écran. Le conteneur est de la même hauteur que l'emballage, tandis que l'écran représente la barre de défilement elle-même.
La structure HTML de la barre de défilement est la suivante:
<div> <div> </div> </div> .myscrollBarv {position: absolu; z-index: 100; largeur: 8px; en bas: 7px; en haut: 2px; droit: 1px; } .myscrollBarv> div {position: absolu; z-index: 100; largeur: 100%; / * Ce qui suit est probablement ce que vous souhaitez personnaliser * / arrière # 800; -Webkit-Background-Clip: Padding-box; -webkit-box-sizing: border-box; -webkit-border-radius: 4px; -webkit-box-shadow: inset 1px 1px 0 rgba (255,255,255,0.5); }Méthode générale:
(1) actualiser cette méthode doit être appelée lorsque l'arbre Dom change
par exemple: setTimeout (function () {myscroll.refresh ();}, 0);
(2) ISCROLL fournit également trois méthodes: ScrollttO, ScrollToElement et ScrollTopage, afin que vous puissiez contrôler l'effet de défilement via JavaScript.
Scrolltto (x, y, temps, parent): laissez la position de la barre de défilement du contenu x / y dans le délai spécifié. Par exemple, MyScroll.Scrollto (0, -100, 200) défile vers le bas de 100 pixels en 200 millisecondes. MyScroll.Scrollto (0, 10, 200, vrai) peut réaliser l'effet de la défilement de 10 pixels sur l'axe y dans les 200 millisecondes par rapport à la position actuelle.
ScrollToElement (élément, temps): Faites défiler vers l'élément spécifié dans le délai spécifié. Par exemple, MyScroll.ScrollToElement ('Li: Nth-Child (10)', 100) défile en position du 10e élément Li à moins de 100 millisecondes. Le premier paramètre peut être utilisé pour filtrer les éléments avec le sélecteur dans CSS3.
Snaptopage (Pagex, Pagey, Time): Faites défiler de la page 1 à la page 2 en 200 millisecondes (0 représente la page 1, 1 représente la page 2). Cette fonction peut être appelée lors de l'utilisation de la fonction SNAP.
(3) Detroy () élimine complètement Myscroll et son espace mémoire occupé
EG: myscroll.destroy ();
myscroll = null;
La direction de développement d'Iscroll
Prise en charge du domaine
Optimisation de mise à l'échelle
Meilleure compatibilité du navigateur de bureau
Optimisation de l'événement Onscrol
Modifications dans l'ajout d'une valeur de hachage
Rafraîchissement automatique après les changements DOM