PageSlider
1.0.0
PageSlider es un componente de pantalla deslizante para terminales móviles. Admite deslizamiento hacia arriba y hacia abajo, deslizamiento hacia izquierda y derecha, deslizamiento prohibido y otras funciones.
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 ;
}Debido a los principios de implementación, la configuración de estilo anterior es necesaria.
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() pantalla anteriornext() siguiente pantallamoveTo(n) salta a la enésima pantalla, con un efecto de relajaciónmoveTo(n, true) salta directamente a la enésima pantalla sin efecto de relajación Normalmente, la animación de los elementos de la página se controla mediante estilos, de la siguiente manera:
. current . dom {
-webkit-animation : slideToTop 1 s 0.5 s ease both;
}PageSlider admite la vinculación de animaciones directamente a elementos DOM específicos, de la siguiente manera:
< 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 > El deslizamiento inicial de PageSlider es relativamente simple. Determina directamente el gesto para girar la pantalla. Sin embargo, a un amigo le gusta poder abrir la página y ver la siguiente pantalla cuando se mueve. Este es手势跟随que dijo mi amigo. También dejó de usar PageSlider porque no tenía esta función, por lo que la nueva versión la admite. Solo necesita configurarlo como se muestra a la derecha: gestureFollowing: true .
Con el desarrollo de los negocios, a veces es necesario bloquear la pantalla actual y no responder a los eventos de deslizamiento del usuario. Es necesario hacer clic en un botón o completar ciertas operaciones antes de deslizar automáticamente la pantalla. Esta actualización proporciona los siguientes métodos para bloquear:
< div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div > data-lock-next : prohíbe deslizarse hacia atrás data-lock-prev : prohíbe deslizarse hacia adelante
A veces, cuando una página retrocede, desea volver directamente a la página a la que saltó la última vez sin comenzar de nuevo. Solo necesita configurarlo como se muestra a la derecha: rememberLastVisited: true , que guardará el índice de la página actual en el almacenamiento local. cuando regrese. Es fácil de operar de la siguiente manera:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;Este es un hábito personal cuando estaba desarrollando, asumí que al escribir la animación de la segunda pantalla, ocultaría la primera pantalla para poder ir directamente a la segunda pantalla cada vez que la actualizara sin tener que deslizarme. Pero cuando escribo la animación de la quinta pantalla, necesito ocultar manualmente n-1 pantallas. . . . Luego el líder se acercó y dijo: XXX, ven, déjame ver el efecto que has hecho, y luego tengo que mostrar manualmente los que antes estaban ocultos. Después de diez segundos, continúo desarrollándolos y ocultándolos nuevamente. . . . . La vida es tan corta que no puedo soportarla. Por lo tanto, sólo necesitas hacer lo siguiente para desarrollarte felizmente:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
dev : 0 //0|1|2|3|...
} ) ; A veces, habrá requisitos del producto que esperan que cuando se regrese a la página, las animaciones como la entrada ya no se ejecuten. Ejecutarlas una vez es suficiente. Solo necesita configurar animationPlayOnce: true .
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
animationPlayOnce : true
} ) ;Este es un requisito poco común que requiere que cada pantalla esté diseñada con una altura fija. Al deslizar la página en una pantalla pequeña, no pasa la página directamente, sino que se desplaza de forma nativa. Cuando el desplazamiento llega al final, la página se activa nuevamente. Pase la página para obtener el efecto específico, primero puede escanear el código QR correspondiente en la parte posterior para experimentarlo.
< 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 > Configurar -webkit-overflow-scrolling: touch; en el elemento .page puede activar un desplazamiento fluido nativo, lo que hace que la experiencia de desplazamiento sea más cómoda. También es posible no configurarlo, pero el efecto es muy diferente; un valor de altura mayor que la pantalla, se activará este efecto. Si no se establece, el valor predeterminado es recorrer la altura de los elementos secundarios directos y compararla con la altura de la pantalla para determinar si es una página de contenido larga.
A veces, encontrará tal demanda. Hay contenido oculto en la página, pero debe mostrarse cuando se desliza hacia abajo por primera vez. En este momento, debe desactivar el cambio de página y luego deslizarse nuevamente después de la interacción. Se completa para pasar la página. Aquí se proporciona un ejemplo para referencia del usuario. Consulte el ejemplo a continuación para obtener más detalles.
Vea si es necesario implementar las siguientes funciones de acuerdo con los requisitos posteriores:
字符串en el método moveTo
