resumo
Esta versão do ISCROLL 4 reescreve completamente o código original da estrutura do ISCROLL. Este projeto foi criado inteiramente por causa do uso generalizado de navegadores de webkit móveis (como iPhone, iPad, Android)
Uma maneira localizada de deslizar o conteúdo de um elemento que define a altura e a largura é fornecido. Infelizmente, nesse caso, todas as páginas de aplicativos da Web não podem conter um cabeçalho, final da página ou conteúdo rolável com a posição: absoluta.
Área do meio.
No entanto, a revisão mais recente do sistema Android já pode suportar esse recurso (embora o suporte não seja particularmente bom), e a Apple parece relutante em aplicar o evento Slide de um deno ao elemento DIV.
Além dos recursos das versões anteriores do ISCROLL, o ISCROLL 4 também inclui os seguintes recursos:
(1) Zoom (pinça/zoom)
(2) Puxe para cima/para baixo para atualizar
(3) Melhoria de velocidade e desempenho
(4) capturar com precisão os elementos
(5) Barra de rolagem personalizada
Dicas amigáveis: o Iscroll 4 não é uma alternativa simples ao ISCROLL 3, e a documentação da API já é diferente. Considerando também que esta versão está na versão beta, algumas APIs podem ter pequenas alterações.
Guia do usuário
Neste documento, você encontrará muitos exemplos para ensiná -lo a começar rapidamente com a biblioteca de script do ISCROLL. Pode ser um pouco chato se referir ao exemplo de demonstração no artigo e ler este documento com cuidado, mas este artigo é a essência da biblioteca de scripts IsCroll.
O ISCROLL precisa inicializar os elementos a serem rolados e não limita o número de elementos usando o ISCROLL em uma página (sua configuração de hardware não é considerada aqui). O tipo e o comprimento do conteúdo no elemento de rolagem afetarão a biblioteca de script do ISCROLL até certo ponto
O número de elementos que podem ser usados simultaneamente.
Ao usar a biblioteca de script do ISCROLL, a estrutura da árvore Dom deve ser simples o suficiente para remover tags desnecessárias e tentar evitar o ninho excessivo de tags.
A estrutura ideal do uso do ISCROLL é a seguinte:
<div id = "wrapper"> <ul> <li> </li> ...... </ul> </div>
Neste pequeno exemplo, a tag UL será rolada. O ISCROLL deve estar conectado ao invólucro fora do conteúdo de rolagem para produzir resultados.
【Precauções】:
Somente o primeiro elemento infantil no invólucro pode ser rolado. Se você deseja rolar mais elementos, tente o seguinte método de escrita:
<div id = "wrapper"> <div id = "scroller"> <ul> <li> </li> ... </ul> <ul> <li> </li> ... </ul> </div> </div>
Neste exemplo, o elemento roller pode ser rolado, mesmo que contenha dois elementos UL
O ISCROLL deve ser instanciado antes de ligar, você pode instanciar o ISCROLL nos seguintes casos:
(1) Use o evento OnDomContentLoaded para obter rolagem
Adequado para rolar o conteúdo apenas contém texto e imagens, e todas as fotos têm tamanhos fixos
<script src = "iscroll.js"> </script> <cript> var myscroll; função carregada () {myscroll = new iScroll ("wrapper"); } window.addeventListener ("domcontentLoaded", carregado, false); </script>Nota: a variável myscroll é global, para que você possa chamá -lo em qualquer lugar
(2) Use o evento OnLoad para obter rolagem
Como o evento DomContentLoaded será chamado após o carregamento da estrutura DOM, o comprimento e a largura da área de rolagem podem não ser determinados antes que elementos como imagens não sejam carregados. No momento, o evento Onload pode ser implementado.
<script src = "iscroll.js"> <cript> <cript> var myScroll; função carregada () {setTimeout (function () {myScroll = new ISCROLL ("wrapper");}, 100); } window.addeventListener ("carregamento", carregado, falso); </script>Nesse caso, o ISCROLL será inicializado após os recursos da página (incluindo imagens) forem carregados 100ms. Esta deve ser uma maneira relativamente segura de chamar o ISCROLL.
(3) Inicialização de inline
Esta situação será chamada quando a página for carregada no JS. Este método não é recomendado, mas muitos bigwigs JavaScript estão usando esse método. Que razão tenho que discordar?
<script src = "iscroll.js"> </script> <div id id = "wrapper"> <ul> <li> </li> ... </ul> </div> <cript> var myscroll = new Iscroll ("wrapper"); </script>No entanto, é recomendável que você use alguns métodos prontos para a estrutura para ligar para o ISCROLL com segurança (como Ready () em jQuery).
Parâmetros passados no ISCROLL
O segundo parâmetro no ISCROLL permite personalizar algum conteúdo, como o seguinte código:
<Cript> var myscroll = new Iscroll ("wrapper", {hscrollBar: false, vcrollbar: false}); </script>O segundo parâmetro geralmente é um objeto. Por exemplo, a barra de rolagem não é exibida no exemplo acima. Os parâmetros comumente usados são os seguintes:
hscroll false proíbe rolagem horizontal true rolagem horizontal padrão para true
vscroll false refinado rolagem vertical refinada true scroll inad -ingestão para true
hscrollbar false cous barras de rolagem na direção horizontal
vscrollBar false ocultar barra de rolagem na direção vertical
FixedScrollBar no sistema iOS, quando o arrasto do elemento excede o limite do rolador, a barra de rolagem diminui. Defina como true para impedir que a barra de rolagem exceda o roller.
A área visível do pergaminho. O padrão é verdadeiro no Android e falso no iOS
FadeScrollBar False Especifica para ocultar barras de rolagem quando não há efeito de desbotamento
HidescrollBar cura a barra de rolagem quando não há interação do usuário padrão para true
Habilitar ou desativar o salto de limites, padrão para true
O momento permite ou desativa a inércia, os padrões para true, esse parâmetro é muito útil quando você deseja salvar recursos.
Lockdirection False Cancels bloqueando a direção do arrasto, o arrasto verdadeiro só pode estar em uma direção (para cima/para baixo ou esquerda/direita)
Realização de vários efeitos
Scroll Refresh 'Pull to Atualize' Demo
Esse efeito se tornou muito popular desde o Twitter e alguns aplicativos locais da Apple apareceram. Você pode dar uma olhada aqui.
Na versão mais recente, o autor separa a parte "puxar para atualizar" como um plug-in adicional para o ISCROLL. Você pode clicar aqui para ver como o puxar para a atualização funciona. Tudo o que você precisa fazer é personalizar o método pulldownAction (). Você pode precisar de Ajax para carregar um novo conteúdo, mas lembre -se de chamar a atualização quando a árvore Dom mudar. Deve -se lembrar que, no exemplo, adicionamos um atraso de 1 segundo para simular o efeito de atraso da rede. Obviamente, se você não quiser usar esse atraso, basta remover o método SetTimeout.
Zoom (beliscar / zoom) 'puxar para refrescar' demonstração
Temos que enfrentar o fato de que apenas rolar é realmente nada de novo. É por isso que nesta versão do iScroll 4 permitimos que você o coloque
Grande e encolher. Para querer essa função, você só precisa definir o parâmetro Zoom como True para usar gestos para aumentar e diminuir o zoom. Você pode dar uma olhada aqui.
O clique duas vezes para aumentar e o zoom também é suportado no ISCROLL 4. Para usar a função de zoom, você precisa de pelo menos a seguinte configuração:
var myScroll = new Iscroll ("wrapper", {zoom: true});
Se você deseja personalizar a função de zoom em profundidade, pode usar algumas das seguintes opções:
Zoommax Especifica o múltiplo máximo que permite a ampliação, o padrão é 4
[NOTAS]: Se você deseja que a escala da imagem seja eficaz, coloque -as na camada de síntese de hardware. Nos termos do Layman, é usar -Webkit -transform: translate3d (0,0,0) em todos os elementos IMG que precisam ser escalados. E é particularmente importante que a aceleração do hardware ocupe muitos recursos e seja usada com cautela, caso contrário, seu aplicativo pode travar.
Snap e Snap to Element 'Carousel' Demo
A função SNAP é determinar se o elemento desliza para a posição especificada. Esse efeito permite criar um efeito de letra sofisticado.
O plug-in analisará automaticamente elementos do mesmo rótulo ou do mesmo tamanho na área de rolagem que o objeto Capture, e você também pode especificar o objeto capturado através de parâmetros.
var myScroll = new Iscroll ("wrapper", {snap: true, momento: false, hscrollbar: false, vscrollBar: false});Você pode definir o objeto SNAP definindo o parâmetro SNAP na tag especificada. Por exemplo, capture a tag li.
var myScroll = new Iscroll ("wrapper", {snap: "li", momento: false, hscrollbar: false, vscrollbar: false});Neste exemplo, o pergaminho pode capturar o elemento Li mais esquerdo mais esquerdo na área de rolagem
Barras de rolagem personalizadas
No ISCROLL 4, uma série de CSS pode ser usada para personalizar a renderização das barras de rolagem. Você pode adicionar um parâmetro de classe à barra de rolagem, como segue:
var myScroll = new Iscroll ("wrapper", {scrollBarclass: "myScrollBar"});Deve -se notar que a barra de rolagem é composta por dois elementos: o contêiner e a tela. O contêiner tem a mesma altura que o invólucro, enquanto a tela representa a própria barra de rolagem.
A estrutura HTML da barra de rolagem é a seguinte:
<div> <div> </div> </div> .myScrollBarv {posição: absoluto; z-index: 100; largura: 8px; inferior: 7px; topo: 2px; direita: 1px; } .MyScrollBarv> div {Posição: Absoluto; Z-Index: 100; Largura: 100%; / * O seguinte é provavelmente o que você deseja personalizar */Background: -Webkit gradiente (linear, 0 0, 100% 0, de (#f00), a (#900)); borda: 1px Solid #800; -webkit-background clipe: padding-box; -webkit-box-sizing: border-box; -webkit-border-radius: 4px; -webkit-box-shadow: inserção 1px 1px 0 RGBA (255,255,255,0.5); }Método Geral:
(1) Atualizar esse método deve ser chamado quando a árvore Dom mudar
por exemplo: setTimeout (function () {myscroll.Refresh ();}, 0);
(2) O ISCROLL também fornece três métodos: Scrollto, ScrollToElement e ScrollToPage, para que você possa controlar o efeito de rolagem por meio de JavaScript.
scrollTo (x, y, tempo, parente): deixe o conteúdo scrollbar x/y posicionar dentro do tempo especificado. Por exemplo, MyScroll.Scrollto (0, -100, 200) rola para baixo por 100 pixels em 200 milissegundos. MyScroll.Scrollto (0, 10, 200, verdadeiro) pode alcançar o efeito de rolar 10 pixels no eixo Y em 200 milissegundos em relação à posição atual.
scrollToElement (elemento, tempo): role para o elemento especificado dentro do tempo especificado. Por exemplo, MyScroll.ScrollToElement ('Li: Nth-Child (10)', 100) rola para a posição do 10º elemento Li em 100 milissegundos. O primeiro parâmetro pode ser usado para filtrar elementos com o seletor no CSS3.
Snaptopage (PageX, Pagey, Time): Role da página 1 para a página 2 em 200 milissegundos (0 representa a página 1, 1 representa a página 2). Esta função pode ser chamada ao usar a função SNAP.
(3) Detry () elimina completamente o MyScroll e seu espaço de memória ocupado
por exemplo: myscroll.destroy ();
myScroll = null;
A direção de desenvolvimento de Iscroll
Formulário de suporte de domínio
Otimização de escala
Melhor compatibilidade do navegador de desktop
Otimização do evento Onscrol
Mudanças na adição de um valor de hash
Atualização automática após as mudanças de DOM