Heim > Artikel > Web-Frontend > Was ist iScroll? Ausführliche Erläuterung der Anwendungsbeispiele von iScroll
Was ist iScroll? Ausführliche Erläuterung der Anwendungsbeispiele von iScroll
- 伊谢尔伦Original
- 2017-07-19 15:38:374116Durchsuche
Die Entstehung von iScroll:
Die Entstehung von iScroll ist ausschließlich dem mobilen Webkit-Browser zu verdanken, 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 sein Wrapper Der Inhalt kann vertikal oder horizontal gescrollt werden. Wenn Sie also iScroll verwenden, sollten die Scrollelemente so einfach wie möglich sein, die Anzahl der DOMs reduzieren und die Verschachtelung reduzieren, denn je komplexer die DOM-Struktur ist, desto schwieriger ist es wird für die Ausführung von iScroll benötigt, was dazu führen kann, dass einige Knoten ein abnormales Verhalten zeigen. Daher lautet die empfohlene DOM-Struktur wie folgt:
<p id="wrapper">//overflow:hidden; <ul> //只有第一个DOM结构（ul）被实例化，这个DOM可以纵向或者横向的滚动， //多出的内容会被wrapper的样式hidden。 <li>1</li> <li>2</li> <li>3</li> </ul> </p>
Hinweis: Auch hier kann nur das erste untergeordnete Element (ul) im Wrapper instanziiert und gescrollt werden, und muss mit dem äußeren DOM (Wrapper) kombiniert werden, um einen Bildlauf zu ermöglichen.
Was passiert, wenn sich in der Verpackung mehrere Uls befinden? Es ist ganz einfach. Denken Sie an diesen Satz: Nur das erste untergeordnete Element (ul) im Wrapper kann instanziiert und gescrollt werden:
<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>
Sehen Sie es sich an. Nur das erste wird sein 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 :
Nachdem wir nun über die Instanziierung gesprochen haben, was sollte wir tun? Wann instanziieren? Es wird gesagt, dass es viele Instanziierungsmethoden gibt, aber ich habe sie noch nie verwendet:
(1) Laden Sie iscroll.js und uw3c der aktuellen Seite am Ende des HTML-Codes (uw3c.html). ) Seite (nach Body und vor HTML) .js, dadurch wird sichergestellt, dass die HTML-DOM-Struktur geladen werden kann.
(2) Instanziieren Sie iScroll, bevor JS die DOM-Struktur und die Daten der Seite einfügt, dh instanziieren Sie es ganz am Anfang von JS, da JS später zum Einfügen von DOM oder Daten verwendet werden kann, um sicherzustellen, dass iScroll eingefügt wird bevor Daten eingefügt werden. Bereits instanziiert.
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("<p>pagedata</p>");Parameter in iScroll:
Beim Instanziieren von iScroll können Sie zwei Parameter übergeben. Der erste Parameter ist die ID des instanziierten äußeren DOM 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. So zum Beispiel:
//在200毫秒的时间内，Y轴向上滚动100像素； uw3c.scrollTo(0, -100, 200) //在200毫秒的时间内，相对于当前位置，X轴向左滚动100像素； uw3c.scrollTo(-100, 0, 200, true)
(2) Methode „refresh()“: Nachdem sich die DOM-Struktur geändert hat, muss iScroll aktualisiert werden, andernfalls wird das Bildlauf-Plug-in aktualisiert. in wird instanziiert. Ungenau:
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 am Ende des Scrollens ausgeführt wird. Wenn Sie ein Ereignis berühren möchten, wenn der Bildlauf endet, ist diese Methode nützlich:
//滚动结束后，执行的方法，滚动后会出现提示框alert("phpcn")
onScrollEnd:function(){
alert("phpcn");
} (5) onRefresh: Nachdem sich die DOM-Struktur geändert hat iScroll muss aktualisiert werden, andernfalls wird das Scroll-Plugin 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 detaillierte Inhalt vonWas ist iScroll? Ausführliche Erläuterung der Anwendungsbeispiele von iScroll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!