suchen

Heim >Web-Frontend >js-Tutorial >Erfahren Sie, wie Sie das mobile Bildlaufleisten-Plug-in_jquery von jquery iScroll.j verwenden

Erfahren Sie, wie Sie das mobile Bildlaufleisten-Plug-in_jquery von jquery iScroll.j verwenden

WBOY
WBOYOriginal
2016-05-16 15:13:281223Durchsuche

Welches ist das am häufigsten verwendete Plug-in in Ihrer täglichen Arbeit, jQurey? Lazyload? Diese gibt es zwar alle auf der PC-Seite, aber das am häufigsten verwendete Plug-in auf der mobilen Seite ist iScroll. Was genau ist iScroll und wie sollte es verwendet werden? iScroll ist ein sehr leistungsfähiges Plug-In, und ich habe nur ein oberflächliches Verständnis davon. Hier werden wir es kurz vorstellen.
Generation von iScroll:

iScroll wurde vollständig aufgrund mobiler Webkit-Browser entwickelt, beispielsweise auf iPhone- und Android-Mobilgeräten.
So verwenden Sie iScroll:

Das Prinzip von iScroll besteht darin, dass es in der äußeren Ebene einen versteckten Überlauf (overflow:hidden;) DOM gibt und dann die erste DOM-Struktur in diesem Bereich instanziiert wird und der umschlossene Inhalt vertikal oder horizontal gescrollt werden kann. Wenn Sie also iScroll verwenden, sollten die Bildlaufelemente so einfach wie möglich sein, die Anzahl der DOMs reduzieren und die Verschachtelung reduzieren, denn je komplexer die DOM-Struktur ist, desto schwieriger wird die Ausführung von iScroll, was zu einigen Problemen führen kann Knoten werden abnormal angezeigt. Daher lautet die empfohlene DOM-Struktur wie folgt: 

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

Hinweis: Auch hier kann nur das erste untergeordnete Element (ul) im Wrapper zum Scrollen instanziiert werden, und das Scrollen muss in Verbindung mit dem äußeren DOM (Wrapper) erreicht werden.
Was ist, wenn der Wrapper mehrere Uls enthält? Es ist ganz einfach. Denken Sie daran, dass nur das erste untergeordnete Element (ul) im Wrapper instanziiert und gescrollt werden kann: 

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

Wie Sie sehen können, wird nur zuerst instanziiert. Hinweis: Die ID der ersten DOM-Struktur (erste) muss hier nur geschrieben werden, um die Identifizierung aller zu erleichtern, aber die äußerste ID (Wrapper) muss geschrieben werden, da sie beim Instanziieren von Fill benötigt wird in dieser ID: 

var myScroll = new iScroll("wrapper");

Wie iScroll instanziiert werden soll:

Da wir über Instanziierung gesprochen haben, wann sollten wir sie instanziieren? Es wird gesagt, dass es viele Instanziierungsmethoden gibt, aber ich habe sie nie verwendet, ich werde nur eine erwähnen:
(1) Laden Sie iscroll.js und uw3c.js der aktuellen Seite unten auf der HTML-Seite (uw3c.html) (nach dem Textkörper und vor HTML), um sicherzustellen, dass die DOM-Struktur von HTML geladen werden kann.
(2) Instanziieren Sie iScroll, bevor JS die DOM-Struktur und die Daten der Seite einfügt, das heißt, instanziieren Sie es ganz am Anfang von JS, da JS später zum Einfügen von DOM oder Daten verwendet werden kann. Dadurch wird sichergestellt, dass iScroll vor dem Einfügen von Daten instanziiert wurde. .

HTML://HTML-Struktur

<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://JS-Dateiinhalt

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

Parameter in iScroll:

Beim Instanziieren von iScroll können Sie zwei Parameter übergeben. Der erste Parameter ist die ID des instanziierten äußeren DOM und der zweite Parameter ist das Objekt der iScroll-Ausführungsmethode: 

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

Der Inhalt des zweiten Parameters ist wie folgt. Dieser Parameter steuert die Wirkung von 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）

Methoden in iScroll:

Natürlich gibt es im zweiten Parameter auch einige Methoden, die ausgeführt werden können:
(1)scrollTo(x, y, time, relative) Methode: Übergeben Sie 4 Parameter: X-Achsen-Scrollentfernung, Y-Achsen-Scrollentfernung, Effektzeit und ob sie relativ zur aktuellen Position ist. Also zum Beispiel: 

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

(2)refresh()-Methode: Nachdem sich die DOM-Struktur geändert hat, muss iScroll aktualisiert werden, sonst wird das Scroll-Plug-in falsch instanziiert: 

uw3c.refresh();//刷新iScroll

(3)onPosChange, gibt es eine Methode, die die Positionsänderung zurückgeben kann? Sie können überprüfen, ob es in dem von Ihnen verwendeten iScroll eine onPosChange-Methode gibt: 

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

(4) onScrollEnd: Ereignis, das ausgeführt wird, wenn der Bildlauf endet. Wenn Sie ein Ereignis auslösen möchten, wenn der Bildlauf endet, ist diese Methode nützlich: 

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

(5) onRefresh: Nachdem sich die DOM-Struktur geändert hat, muss iScroll aktualisiert werden, andernfalls wird das Scroll-Plug-in falsch instanziiert. onRefresh ist die Methode, die nach der Aktualisierung von iScroll ausgeführt wird.
(6) onBeforeScrollStart: Der Zeitrückruf vor dem Scrollen. Standardmäßig wird das Standardverhalten des Browsers verhindert.
(7) onScrollStart: Rückruf zum Starten des Scrollens.
(8) onBeforeScrollMove: Rückruf, bevor der Inhalt verschoben wird.
(9) onScrollMove: Rückruf für die Inhaltsverschiebung.
(10) onBeforeScrollEnd: Rückruf vor dem Ende des Scrollens.
(11) onTouchEnd: Rückruf, nachdem die Hand den Bildschirm verlässt.
(12) onDestroy: Rückruf zum Zerstören der Instanz.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er jedem hilft, das iScroll.js-Plug-in für die mobile Bildlaufleiste kompetent zu nutzen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery zTree lädt das Baummenü function_jqueryNächster Artikel：jQuery zTree lädt das Baummenü function_jquery

In Verbindung stehende Artikel

Mehr sehen