Como usar o H5 para implementar um exemplo de um rotor de tela de toque

No início do front -end, compartilhe o processo de implementação da carcaça da tela de toque no telefone celular.

1. Ciclo de suporte deslizando

2. A largura pode ser definida arbitrariamente, sem necessidade de largura com a tela

3. A página pode rolar verticalmente

4. Você pode definir a troca de elementos de monitoramento de recuperação

5. JS puro, não use nenhuma biblioteca de terceiros

1. Suponha que a largura do sub -elemento .Item seja 375px, usando o posicionamento absoluto para colocar todos os sub -elementos no elemento pai

2. Defina a largura do elemento pai .Carousel como 375px, que é o mesmo que o sub -elemento. Item Largura

3. Adicione eventos de toque ao elemento pai .Carousel: Touchstart, Touchmove, Toukend

4. Quando você pressionar o dedo, salve a posição inicial (ClientX)

5. Ao deslizar os dedos, julgue a direção de deslizar a distância deslizante:

① Deslize o dedo para a esquerda e mova os elementos do lado direito do elemento atual e do elemento atual ao mesmo tempo

② Passe os dedos para a direita e mova os elementos no lado esquerdo dos elementos atuais e atuais ao mesmo tempo

6. Quando seus dedos forem levantados, determine se deve mudar para a próxima página pela distância deslizante

① A distância do movimento não excede 50%da largura do sub -elemento e recua a página atual para a posição inicial sem alternar o elemento atual.

② A distância móvel excede 50%da largura do elemento filho e o elemento atual é alterado para o próximo elemento.

③ Defina a propriedade de transformação do elemento atual para traduzir3D (0px, 0px, 0px) e

④ Defina o atributo de transformação do próximo elemento filho para traduzir3D (375px, 0px, 0px)

⑤ Defina o atributo de transformação do elemento filho anterior para traduzir3D (-375px, 0px, 0px) e o atributo Z-Index +1

⑥ Defina a propriedade Z-Index de todos os outros sub-elementos para o valor padrão

7. O primeiro elemento do primeiro elemento filho é o último elemento, e o próximo elemento do último elemento é o primeiro elemento, que é implementado pela lista ligada circular.

Ao se mover, defina a propriedade de transformação do elemento filho .Item, não o elemento pai .Carousel

HTML & CSS

 // html <div class = carousel oTouchStart => <div class = background: #3b76c0> </h3> </div> </div> <div class = itemle = backgr om: #58c03b;> <h3> item- 2 </h3> </div> <div class = item style = background: #c03b25;> <h3> item-3 </h3> </div> <div class = background: #e0a718;> <h3> item -4 </h3> </div> <div class = item style = background: #c033;> <h3> item-5 </h3> </div> </div>

 //css.Carousel {Altura: 50%;

JS

Defina o estado inicial

Primeiro perceba uma lista vinculada de duas via para manter os elementos no componente de rotação.

 Nó da função (dados) {this.data = dados; Head = NULL; last = this.head;} ​​else {this.head.prev = node; Node .index = _nodes.length;

Com a lista vinculada, crie um exemplo vinculado, adicione o sub -elemento à lista vinculada e defina alguns estados iniciais

 var _Container = Document.QuerySelector (. + ContraClass); i ++) {list.append (novo nó (_items [i]));} var _prev = null; Zar _activezindex = _normalzindex + 1; elementos para adicionar 1

Quando você pressionar o dedo, salve a posição inicial

 _Container.addeventListener (touchstart, function (e) {// e.preventDefault (); // A anotação dessa linha de código impedirá que a página rolasse verticalmente no elemento. Então, então clientx; // salvar a posição de o dedo estrito = Touch.clienty;

Deslize os dedos na tela e mova os dedos na página

 _Container.adDeventListener (Touchmove, função (e) {// e.preventDefault (); // A anotação desse código de linha impedirá que a página no elemento role verticalmente. o dedo deslizando na direção x var deltay = touch.clienty -starty; para ser esquerdo e direito. seus elementos esquerdo e direito ao mesmo tempo movimentos (traduzir);

Quando o dedo sair da tela, o cálculo acabará por ficar em qual página

 _Container.adDeventListener (Toukend, function (e) {// e.PreventDefault (); // Cancelamento do código desta linha impedirá a rolagem vertical da página no elemento // calcular o dedo o tempo para permanecer na tela Var Deltat = New Date (). A distância é a distância entre a distância deslizante. de 50%da tela, retorne à página anterior se (Math.abs (tradutor)/_itemwidth <0,5) {isrollback = true;} else {// se a distância deslizante for 50%maior que a tela, deslize para o Página Próxima Traduzir = Traduzir <0?

Para facilitar o uso, encapsulei todo o processo de implementação em uma biblioteca e adicionei o método Anterior (), Next (), que é muito simples:

 <script src = lib/carousel.js> </script> createCarousel (carrossel, ele, verdadeiro) .bindTouchEvent () .SetItemChangedHandler (onPagechanged); // Se as configurações do terceiro parâmetro precisam ser reproduzidas pelo Cycle, True é reproduzido pelo ciclo

O acima é todo o conteúdo deste artigo.