PageSlider
1.0.0
PageSlider ist eine verschiebbare Bildschirmkomponente für mobile Endgeräte. Sie unterstützt das Schieben nach oben und unten, das Schieben nach links und rechts und andere Funktionen. Außerdem unterstützt es die modulare Lademethode von AMD.
HTML:
< div class =" page-wrap " >
< div class =" page " >
< div class =" title " > page one </ div >
< div class =" subtitle " > page one subtitle </ div >
< div class =" arrow " > </ div >
</ div >
< div class =" page " >
< div class =" title " > page two </ div >
< div class =" subtitle " > page two subtitle </ div >
< div class =" arrow " > </ div >
</ div >
< div class =" page " >
< div class =" title " > page three </ div >
< div class =" subtitle " > page three subtitle </ div >
< div class =" arrow " > </ div >
</ div >
< div class =" page " >
< div class =" title " > page four </ div >
< div class =" subtitle " > page four subtitle </ div >
</ div >
</ div >CSS
html , body , . page-wrap {
width : 100 % ;
height : 100 % ;
}
. page {
width : 100 % ;
height : 100 % ;
-webkit-backface-visibility : hidden;
-webkit-perspective : 1000 ;
}Aufgrund des Implementierungsprinzips ist die obige Stileinstellung erforderlich.
JavaScript
new PageSlider ( {
pages : $ ( '.page-wrap .page' )
} ) ; new PageSlider ( {
pages : $ ( '.page-wrap .page' ) , //必需，需要切换的所有屏
direction : 'vertical' , //可选，vertical 或 v 为上下滑动，horizontal 或 h 为左右滑动，默认为 vertical
currentClass : 'current' , //可选, 当前屏的class (方便实现内容的进场动画)，默认值为 'current'
gestureFollowing : 'false' , //可选，如果为 true，则开启手势跟随模式
hasDot : 'false' , //可选，生成标识点结构，样式自己控制
preventDefault : true , //可选，是否阻止默认行为
rememberLastVisited : true , //可选，记住上一次访问结束后的索引值，可用于实现页面返回后是否回到上次访问的页面
animationPlayOnce : false , //可选，切换页面时，动画只执行一次
dev : false , //可选，开发模式，传入具体页面索引值
oninit : function ( ) { } , //可选，初始化完成时的回调
onbeforechange : function ( ) { } , //可选，开始切换前的回调
onchange : function ( ) { } , //可选，每一屏切换完成时的回调
onSwipeUp : function ( ) { } , //可选，swipeUp 回调
onSwipeDown : function ( ) { } , //可选，swipeDown 回调
onSwipeLeft : function ( ) { } , //可选，swipeLeft 回调
onSwipeRight : function ( ) { } //可选，swipeRight 回调
} ) ; prev() vorheriger Bildschirmnext() nächster BildschirmmoveTo(n) springt zum n-ten Bildschirm, was einen beruhigenden Effekt hatmoveTo(n, true) springt ohne Beschleunigungseffekt direkt zum n-ten Bildschirm Normalerweise wird die Animation von Elementen auf der Seite wie folgt durch Stile gesteuert:
. current . dom {
-webkit-animation : slideToTop 1 s 0.5 s ease both;
}PageSlider unterstützt die direkte Bindung von Animationen an bestimmte DOM-Elemente wie folgt:
< div class =" title " data-animation =' {"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"} ' >
page two
</ div >
< div class =" subtitle " data-animation =' {"name": "slideToTop", "duration": 800, "delay": 300, "timing-function": "ease", "fill-mode": "both"} ' >
page two subtitle
</ div > Das anfängliche Schieben von PageSlider ist relativ einfach. Es bestimmt direkt die Geste zum Umblättern des Bildschirms, wenn er berührt wird. Dies ist手势跟随, die mein Freund gesagt hat. Die Verwendung von PageSlider wurde ebenfalls aufgegeben, da diese Funktion nicht vorhanden war. Die neue Version unterstützt sie daher. Sie müssen sie nur wie rechts gezeigt einstellen: gestureFollowing: true .
Mit der Geschäftsentwicklung ist es manchmal erforderlich, den aktuellen Bildschirm zu sperren und nicht auf die Schiebeereignisse des Benutzers zu reagieren. Es ist erforderlich, auf eine Schaltfläche zu klicken oder bestimmte Vorgänge abzuschließen, bevor der Bildschirm automatisch verschoben wird. Dieses Update bietet die folgenden Methoden zum Sperren:
< div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div > data-lock-next : Zurückgleiten verhindern data-lock-prev : Vorwärtsgleiten verhindern
Wenn eine Seite zurückspringt, möchten Sie manchmal direkt zu der Seite zurückkehren, zu der Sie zuletzt gesprungen sind, ohne von vorne zu beginnen. Sie müssen es nur wie rechts gezeigt einstellen: rememberLastVisited: true , wodurch der aktuelle Seitenindex im lokalen Speicher gespeichert wird Bei Ihrer Rückkehr ist die Bedienung wie folgt einfach:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;Dies ist eine persönliche Angewohnheit, als ich beim Schreiben der zweiten Bildschirmanimation davon ausgegangen bin, dass ich den ersten Bildschirm ausblenden würde, damit ich bei jeder Aktualisierung direkt zum zweiten Bildschirm wechseln kann, ohne verschieben zu müssen. Aber wenn ich die Animation für den 5. Bildschirm schreibe, muss ich n-1 Bildschirme manuell ausblenden. . . . Dann kam der Anführer zu diesem Zeitpunkt und sagte: „XXX, komm, lass mich den Effekt sehen, den du erzielt hast“, und dann muss ich die zuvor verborgenen Effekte manuell anzeigen. Nach mehr als zehn Sekunden entwickle ich sie weiter und verstecke sie wieder. . . . . Das Leben ist so kurz, ich kann es nicht ertragen. Daher müssen Sie für eine glückliche Entwicklung nur Folgendes tun:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
dev : 0 //0|1|2|3|...
} ) ; Manchmal gibt es Produktanforderungen, die darauf hoffen, dass der Eintrag und andere Animationen nicht mehr ausgeführt werden. Es reicht aus, ihn einmal auszuführen. Sie müssen nur animationPlayOnce: true festlegen.
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
animationPlayOnce : true
} ) ;Dies ist eine seltene Anforderung, die erfordert, dass jeder Bildschirm eine feste Höhe hat. Beim Verschieben der Seite auf einem kleinen Bildschirm wird die Seite nicht direkt umgeblättert, sondern beim Scrollen wird die Seite ausgelöst Wenn Sie die Seite erneut umblättern, können Sie zunächst den entsprechenden QR-Code auf der Rückseite scannen. Der spezifische Beispielcode lautet wie folgt:
< div class =" page " style =" -webkit-overflow-scrolling: touch; " >
< div class =" page__inner " style =" position: relative; height: 800px; " >
< div class =" title " > page two </ div >
< div class =" subtitle " > page two subtitle </ div >
< div style =" position: absolute; left: 20px; bottom: 10% " > long page </ div >
< div class =" arrow " > </ div >
</ div >
</ div > Das Festlegen von -webkit-overflow-scrolling: touch; auf dem .page -Element kann ein natives reibungsloses Scrollen auslösen, was das Scrollen komfortabler macht. Es ist auch möglich, es nicht festzulegen, aber der Effekt ist sehr unterschiedlich Bei einem Höhenwert, der größer als der Bildschirm ist, wird dieser Effekt ausgelöst. Wenn er nicht festgelegt ist, wird standardmäßig die Höhe der direkten untergeordneten Elemente durchlaufen und mit der Bildschirmhöhe verglichen, um festzustellen, ob es sich um eine lange Inhaltsseite handelt.
Manchmal werden Sie auf eine solche Anforderung stoßen. Es gibt einige versteckte Inhalte auf der Seite, diese müssen jedoch angezeigt werden, wenn Sie zum ersten Mal nach unten blättern. Zu diesem Zeitpunkt müssen Sie das Umblättern deaktivieren und nach der Interaktion erneut blättern ist abgeschlossen, um die Seite umzublättern. Hier wird ein Beispiel als Referenz für den Benutzer bereitgestellt. Weitere Informationen finden Sie im folgenden Beispiel.
Prüfen Sie, ob es erforderlich ist, die folgenden Funktionen gemäß späterer Anforderungen zu implementieren:
字符串in der moveTo-Methode
