PageSlider
1.0.0
PageSlider é um componente de tela deslizante para terminais móveis. Ele suporta deslizamento para cima e para baixo, deslizamento para a esquerda e para a direita, deslizamento proibido e outras funções.
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 ;
}Devido aos princípios de implementação, a configuração de estilo acima é necessária.
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() tela anteriornext() próxima telamoveTo(n) salta para a enésima tela, com um efeito de atenuaçãomoveTo(n, true) salta diretamente para a enésima tela sem efeito de facilitação Normalmente, a animação dos elementos da página é controlada através de estilos, como segue:
. current . dom {
-webkit-animation : slideToTop 1 s 0.5 s ease both;
}PageSlider oferece suporte à vinculação de animações diretamente a elementos DOM específicos, como segue:
< 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 > O deslizamento inicial do PageSlider é relativamente simples. Ele determina diretamente o gesto para virar a tela. No手势跟随, um amigo gosta de poder puxar a página e ver a próxima tela ao tocar. Também desistiu de usar o PageSlider porque não tinha essa função, então a nova versão a suporta. Basta configurá-lo conforme mostrado à direita: gestureFollowing: true .
Com o desenvolvimento dos negócios, às vezes é necessário bloquear a tela atual e não responder aos eventos de deslizamento do usuário. É necessário clicar em um botão ou realizar determinadas operações antes de deslizar a tela automaticamente. Esta atualização fornece os seguintes métodos de bloqueio:
< div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div > data-lock-next : proíbe deslizar para trás data-lock-prev : proíbe deslizar para frente
Às vezes, quando uma página volta, você deseja retornar diretamente à página para a qual saltou da última vez, sem recomeçar. Você só precisa configurá-lo conforme mostrado à direita: rememberLastVisited: true , que salvará o índice da página atual no armazenamento local. quando você retornar. É fácil operar da seguinte forma:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;Este é um hábito pessoal quando estava desenvolvendo, presumi que ao escrever a animação da segunda tela, ocultaria a primeira tela para poder ir diretamente para a segunda tela toda vez que a atualizasse, sem precisar deslizar. Mas quando estou escrevendo a animação da quinta tela, preciso ocultar manualmente n-1 telas. . . . Aí o líder se aproximou e disse: XXX, venha, deixe-me ver o efeito que você fez, e então tenho que exibir manualmente os anteriormente ocultos. Depois de dez segundos, continuo a revelá-los e a ocultá-los novamente. . . . . A vida é tão curta que não aguento. Portanto, você só precisa fazer o seguinte para se desenvolver felizmente:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
dev : 0 //0|1|2|3|...
} ) ; Às vezes, haverá requisitos de produto que esperam que, quando a página for revertida, animações como a entrada não sejam mais executadas. Executá-la uma vez é suficiente animationPlayOnce: true
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
animationPlayOnce : true
} ) ;Este é um requisito raro que exige que cada tela seja projetada com uma altura fixa. Ao deslizar a página em uma tela pequena, não se vira a página diretamente, mas sim a rolagem nativa. Quando a rolagem chega ao fundo, a página é acionada novamente. . Vire a página para o efeito específico, você pode primeiro digitalizar o código QR correspondente na parte de trás para experimentá-lo.
< 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 > Definir -webkit-overflow-scrolling: touch; no elemento .page pode acionar a rolagem suave nativa, tornando a experiência de rolagem mais confortável. Também é possível não defini-la, mas o efeito é muito diferente; um valor de altura maior que a tela , este efeito será acionado. Se não for definido, o padrão é percorrer a altura dos elementos filhos diretos e compará-la com a altura da tela para determinar se é uma página de conteúdo longa.
Às vezes, você encontrará essa demanda. Há algum conteúdo oculto na página, mas ele precisa ser exibido quando você desliza para baixo pela primeira vez. Neste momento, você deve desativar a virada de página e deslizar novamente após a interação. é concluído para virar a página Aqui Um exemplo é fornecido para referência do usuário.
Veja se é necessário implementar as seguintes funções de acordo com os requisitos subsequentes:
字符串no método moveTo
