recherche

Maison >interface Web >js tutoriel >Apprenez à utiliser le plug-in_jquery de la barre de défilement mobile jquery iScroll.js

Apprenez à utiliser le plug-in_jquery de la barre de défilement mobile jquery iScroll.js

WBOY
WBOYoriginal
2016-05-16 15:13:281223parcourir

Quel est le plug-in le plus couramment utilisé dans votre travail quotidien, jQurey ? Chargement paresseux ? Mais tout cela se trouve du côté PC, mais le plug-in le plus couramment utilisé du côté mobile est iScroll. Qu'est-ce qu'iScroll exactement et comment doit-il être utilisé ? iScroll est un plug-in très puissant, et je n'en ai qu'une compréhension superficielle. Nous le présenterons ici brièvement.
Génération d'iScroll :

iScroll a été créé entièrement grâce aux navigateurs Webkit mobiles, tels que sur les appareils mobiles iPhone et Android.
Comment utiliser iScroll :

Le principe d'iScroll est qu'il y a un DOM de débordement caché (overflow:hidden;) dans la couche externe, puis la première structure DOM dans cette zone sera instanciée, et le contenu enveloppé peut défiler verticalement ou horizontalement, Ainsi, lors de l'utilisation d'iScroll, les éléments de défilement doivent être aussi simples que possible, réduire le nombre de DOM et réduire l'imbrication, car plus la structure du DOM est complexe, plus il sera difficile à exécuter pour iScroll, ce qui peut entraîner certains problèmes. nœuds à afficher anormalement. Par conséquent, la structure DOM recommandée est la suivante : 

<div id="wrapper">//overflow:hidden;
 <ul>
 //只有第一个DOM结构（ul）被实例化，这个DOM可以纵向或者横向的滚动，
 //多出的内容会被wrapper的样式hidden。
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</div>

Remarque : encore une fois, seul le premier élément enfant (ul) du wrapper peut être instancié pour le défilement, et le défilement doit être réalisé en conjonction avec le DOM externe (wrapper).
Que se passe-t-il s'il y a plusieurs uls dans le wrapper ? C'est très simple. Rappelez-vous cette phrase, seul le premier élément enfant (ul) du wrapper peut être instancié et défilé : 

<div id="wrapper">//overflow:hidden;
 <div id="first">
  //只有第一个DOM结构(ul)被实例化，这个DOM可以纵向或者横向的滚动，
  //多出的内容会被wrapper的样式hidden
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
  </ul>
  <ul>
   <li>4</li>
   <li>5</li>
   <li>6</li>
  </ul>
 </div>
</div>

Comme vous pouvez le voir, seul le premier sera instancié. Remarque : L'ID de la première structure DOM (en premier) n'a pas besoin d'être écrit ici. J'ai seulement écrit un ID pour faciliter l'identification de chacun, mais l'ID le plus externe (wrapper) doit être écrit car il est nécessaire lorsque JS est instancié. dans cet identifiant : 

var myScroll = new iScroll("wrapper");

Comment iScroll doit être instancié :

Puisque nous avons parlé d'instanciation, quand doit-on l'instancier ? On dit qu'il existe de nombreuses méthodes d'instanciation, mais je ne l'ai jamais utilisée je n'en citerai qu'une :
. (1) Chargez iscroll.js et uw3c.js de la page actuelle en bas de la page HTML (uw3c.html) (après le corps et avant le html) pour vous assurer que la structure DOM du HTML peut être chargée.
(2) Instancier iScroll avant que JS n'insère la structure et les données DOM de la page, c'est-à-dire l'instancier au tout début de JS, car JS peut être utilisé pour insérer du DOM ou des données plus tard. Cela garantit qu'iScroll a été instancié avant d'insérer des données. .

HTML://Structure HTML

<html >
 <body>
  ...code...
 </body>
  //插入iscroll.js文件
 <script type="text/javascript" src="js/iscroll.js" > </script >
 //插入本页面JS文件
 <script type="text/javascript" src="js/uw3c.js" > </script >
</html>

JS://Contenu du fichier JS

var myscroll;
 function iscroll(data){
  //实例化iScroll
  myscroll=new iScroll("wrapper");
  pageData(data);
 }
 function pageData(obj){
  $("body").html(obj);
  myscroll.refresh();//当DOM结构发生变化的时候，需要刷新iScroll
 }
 iscroll("<div>pagedata</div>");

Paramètres dans iScroll :

Lors de l'instanciation d'iScroll, vous pouvez transmettre deux paramètres. Le premier paramètre est l'ID du DOM externe instancié, et le deuxième paramètre est l'objet de la méthode d'exécution d'iScroll : 

var myscroll=new iScroll("wrapper",{hScrollbar:false});
或者
var opts = {
    vScroll:false,//禁止垂直滚动
    snap:true,//执行传送带效果
    hScrollbar:false//隐藏水平方向上的滚动条
   };
var myscroll = new iScroll("wrapper",opts);

Le contenu du deuxième paramètre est le suivant. Ce paramètre contrôlera l'effet d'iScroll : 

hScroll  false 禁止横向滚动 true横向滚动 默认为true
vScroll  false 禁止垂直滚动 true垂直滚动 默认为true
hScrollbar  false隐藏水平方向上的滚动条
vScrollbar  false 隐藏垂直方向上的滚动条
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce   启用或禁用边界的反弹，默认为true
momentum  启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定，true拖动只能在一个方向上（up/down 或者left/right）

Méthodes dans iScroll :

Bien sûr, dans le deuxième paramètre, il y a aussi quelques méthodes qui peuvent être exécutées :
(1) méthode scrollTo (x, y, time, relative) : passez 4 paramètres : distance de défilement sur l'axe X, distance de défilement sur l'axe Y, temps d'effet et si elle est relative à la position actuelle. Ainsi par exemple : 

//在200毫秒的时间内，Y轴向上滚动100像素；
uw3c.scrollTo(0, -100, 200)
//在200毫秒的时间内，相对于当前位置，X轴向左滚动100像素；
uw3c.scrollTo(-100, 0, 200, true)

Méthode (2)refresh() : après la modification de la structure du DOM, iScroll doit être actualisé, sinon le plug-in de défilement sera instancié de manière inexacte : 

uw3c.refresh();//刷新iScroll

(3)onPosChange, existe-t-il une méthode qui peut renvoyer le changement de position ? Vous pouvez vérifier s'il existe une méthode onPosChange dans l'iScroll que vous utilisez : 

onPosChange:function(x,y){
 if(y < -200){
  //如果Y周向上滚动200像素，$("#uw3c")就显示，否则就隐藏。
  $("#uw3c").show();
 }else{
  $("#uw3c").hide();
 }
}

(4) onScrollEnd : événement exécuté à la fin du scroll Si vous souhaitez déclencher un événement à la fin du scroll, cette méthode sera utile : 

//滚动结束后，执行的方法，滚动后会出现提示框alert("uw3c.com")
onScrollEnd:function(){
 alert("uw3c.com");
}

(5) onRefresh : après la modification de la structure du DOM, iScroll doit être actualisé, sinon le plug-in de défilement sera instancié de manière inexacte. onRefresh est la méthode qui sera exécutée après l'actualisation d'iScroll.
(6) onBeforeScrollStart : l'heure de rappel avant de commencer le défilement. La valeur par défaut est d'empêcher le comportement par défaut du navigateur.
(7) onScrollStart : rappel pour démarrer le défilement.
(8) onBeforeScrollMove : rappel avant le déplacement du contenu.
(9) onScrollMove : rappel pour le mouvement du contenu.
(10) onBeforeScrollEnd : rappel avant la fin du défilement.
(11) onTouchEnd : rappel après que la main quitte l'écran.
(12) onDestroy : rappel pour détruire l'instance.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cela aidera tout le monde à utiliser efficacement le plug-in de barre de défilement mobile iScroll.js.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery zTree charge le menu arborescent function_jqueryArticle suivant：jQuery zTree charge le menu arborescent function_jquery

Articles Liés

Voir plus