Qu'est-ce qu'iScroll ? Explication détaillée des exemples d'utilisation d'iScroll-js tutoriel-php.cn

Qu'est-ce qu'iScroll ? Explication détaillée des exemples d'utilisation d'iScroll

伊谢尔伦

Libérer： 2017-07-19 15:38:37

original

4279 Les gens l'ont consulté

La création d'iScroll :

La création d'iScroll est entièrement due au navigateur webkit mobile, comme sur les appareils mobiles iPhone et Android.
Comment utiliser iScroll :

Le principe d'iScroll est qu'il y a un débordement caché (overflow:hidden;) DOM dans la couche externe, puis la première structure DOM dans cette zone sera instanciée, et son wrapper Le contenu peut défiler verticalement ou horizontalement, donc 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 elle est difficile sera pour l'exécution d'iScroll, ce qui peut entraîner un comportement anormal de certains nœuds. Par conséquent, la structure DOM recommandée est la suivante :

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

Copier après la connexion

Remarque : encore une fois, seul le premier élément enfant (ul) du wrapper peut être instancié et défilé, et doit être combiné avec le DOM externe (wrapper) pour réaliser le défilement.
Et 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é :

<p id="wrapper">//overflow:hidden;
 <p 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>
 </p>
</p>

Copier après la connexion

Voyez-le, Only first sera. instancié. Remarque : vous n'avez pas besoin d'écrire l'ID de la première structure DOM ici (en premier). J'ai juste é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é. Remplissez cet ID :

var myScroll = new iScroll("wrapper");

Copier après la connexion

Comment iScroll doit être instancié :

Maintenant que nous avons parlé d'instanciation, que devons-nous faire ? Quand instancier ? On dit qu'il existe de nombreuses méthodes d'instanciation, mais je ne les ai jamais utilisées, je n'en dirai qu'une :
(1) Charger iscroll.js et uw3c de la page courante en bas du HTML (uw3c.html). ) page (après le corps et avant le html) .js, cela garantit que la structure HTML DOM 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 début de JS, car JS peut être utilisé pour insérer du DOM ou des données plus tard, afin de garantir qu'iScroll est inséré avant les données sont insérées. Déjà instancié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>

Copier après la connexion

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("<p>pagedata</p>");

Copier après la connexion

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é, le deuxième paramètre est le. 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);

Copier après la connexion

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）

Copier après la connexion

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)scrollTo(x, y, temps, relatif) : transmettre 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)

Copier après la connexion

(2) méthodefresh() : une fois la structure du DOM modifiée, iScroll doit être actualisé, sinon le plug-in de défilement- in sera instancié Inexact :

uw3c.refresh();//刷新iScroll

Copier après la connexion

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

Copier après la connexion

(4) onScrollEnd : événement exécuté à la fin du défilement If. vous souhaitez toucher un événement à la fin du défilement. Cette méthode est utile :

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

Copier après la connexion

(5) onRefresh : une fois la structure du DOM modifiée, vous avez besoin Actualisez iScroll, 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 est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!