PageSlider
1.0.0
PageSlider est un composant d'écran coulissant pour les terminaux mobiles. Il prend en charge le glissement vers le haut et vers le bas, le glissement vers la gauche et la droite, le glissement interdit et d'autres fonctions. Il prend également en charge la méthode de chargement modulaire 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 ;
}En raison des principes de mise en œuvre, le paramètre de style ci-dessus est nécessaire.
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() écran précédentnext() écran suivantmoveTo(n) passe au nième écran, avec un effet d'assouplissementmoveTo(n, true) passe directement au nième écran sans effet d'assouplissement Habituellement, l'animation des éléments sur la page est contrôlée par des styles, comme suit :
. current . dom {
-webkit-animation : slideToTop 1 s 0.5 s ease both;
}PageSlider prend en charge la liaison des animations directement à des éléments DOM spécifiques, comme suit :
< 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 > Le glissement initial de PageSlider est relativement simple. Il détermine directement le geste pour tourner l'écran. Cependant, un ami aime pouvoir tirer la page et voir l'écran suivant lorsque vous touchez. C'est手势跟随que mon ami a dit. Il a également abandonné l'utilisation de PageSlider car il n'avait pas cette fonction, donc la nouvelle version la prend en charge. Il vous suffit de le définir comme indiqué à droite : gestureFollowing: true .
Avec le développement des affaires, il est parfois nécessaire de verrouiller l'écran actuel et de ne pas répondre aux événements de glissement de l'utilisateur. Il est nécessaire de cliquer sur un bouton ou d'effectuer certaines opérations avant de faire glisser automatiquement l'écran. Cette mise à jour fournit les méthodes de verrouillage suivantes :
< div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div > data-lock-next : interdire le glissement vers l'arrière data-lock-prev : interdire le glissement vers l'avant
Parfois, lorsqu'une page revient en arrière, vous souhaitez revenir directement à la page à laquelle vous êtes allé la dernière fois sans recommencer. Il vous suffit de la définir comme indiqué à droite : rememberLastVisited: true , ce qui enregistrera l'index de la page actuelle dans le stockage local. à votre retour, il est facile d'opérer comme suit :
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;C'est une habitude personnelle. Lorsque je développais, je pensais que lors de l'écriture de l'animation du deuxième écran, je cacherais le premier écran afin de pouvoir accéder directement au deuxième écran à chaque fois que je le rafraîchissais sans avoir à glisser. Mais lorsque j'écris l'animation du 5ème écran, je dois masquer manuellement les écrans n-1. . . . Ensuite, le chef est venu et a dit : XXX, viens, laisse-moi voir l'effet que tu as produit, puis je dois afficher manuellement ceux précédemment cachés. Après dix secondes, je continue à les développer et à les cacher à nouveau. . . . . La vie est si courte, je ne peux pas la supporter. Par conséquent, il vous suffit de faire ce qui suit pour vous développer avec bonheur :
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
dev : 0 //0|1|2|3|...
} ) ; Parfois, il y aura des exigences de produit qui espèrent que lorsque la page est tournée, les animations telles que l'entrée ne seront plus exécutées. Il suffit de l'exécuter une fois. Il vous suffit de définir animationPlayOnce: true .
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
animationPlayOnce : true
} ) ;Il s'agit d'une exigence rare qui nécessite que chaque écran soit conçu avec une hauteur fixe. Lorsque vous faites glisser la page sur un petit écran, cela ne fait pas tourner la page directement, mais un défilement natif lorsque le défilement atteint le bas, la page se déclenche à nouveau. . Tournez la page. Pour l'effet spécifique, vous pouvez d'abord scanner le code QR correspondant au dos pour en faire l'expérience. L'exemple de code spécifique est le suivant :
< 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 > Le réglage de -webkit-overflow-scrolling: touch; sur l'élément .page peut déclencher un défilement fluide natif, rendant l'expérience de défilement plus confortable. Il est également possible de ne pas le définir, mais l'effet est très différent ; une valeur de hauteur supérieure à celle de l'écran, cet effet sera déclenché S'il n'est pas défini, la valeur par défaut est de parcourir la hauteur des éléments enfants directs et de la comparer avec la hauteur de l'écran pour déterminer s'il s'agit d'une longue page de contenu.
Parfois, vous rencontrerez une telle demande. Il y a du contenu caché sur la page, mais il doit être affiché lorsque vous glissez vers le bas pour la première fois. À ce stade, vous devez désactiver le changement de page, puis glisser à nouveau après l'interaction. est terminé pour tourner la page. Ici Un exemple est fourni pour référence utilisateur. Voir l'exemple ci-dessous pour plus de détails.
Vérifiez s'il est nécessaire de mettre en œuvre les fonctions suivantes en fonction des exigences ultérieures :
字符串dans la méthode moveTo
