haixiu

Não seja tímido?

Como usar

? Método 1

Acesso direto: https://iuroc.github.io/haixiu/.

? Método 2

Bifurque este projeto e use as páginas do Github para implantar o diretório /docs .

Recursos do projeto

1. Site estático puro, pode ser implantado diretamente usando páginas do Github
2. Suporta paginação de dados e exibição por tags e rolagem para baixo para adicionar automaticamente o conteúdo da próxima página
3. Implementar visualizador de imagens de alta qualidade baseado em PhotoSwipe
4. Quando o visualizador de imagens troca de imagem, a lista de miniaturas rola e segue onde quer que você a veja.
5. Quando o visualizador de imagens atinge a última imagem, a próxima página de dados é adicionada automaticamente sem interromper a navegação.
6. Com base no Location Hash, a implementação suporta history.back() para fechar o visualizador de imagens e é compatível com a tecla voltar do celular.
7. Implementado com base no Location Hash para oferecer suporte a history.forward() para abrir o visualizador de imagens e restaurar automaticamente o último local
8. Ao fechar o visualizador de imagens através do Hash, ele suporta a interrupção da animação, o que é uma ótima experiência
9. Registre automaticamente a posição da barra de rolagem e elimine o impacto dos eventos HashChange na barra de rolagem

Tecnologias relacionadas

1. Usando o rastreador Node.js Fetch API
2. Depois de rastrear os dados, as páginas são armazenadas em vários arquivos JSON, com números de páginas e informações de tags marcadas nos nomes dos arquivos.
3. O front-end usa a estrutura Van.js para construir uma UI responsiva
4. O front-end solicita diretamente arquivos JSON estáticos por meio do Fetch para implementar solicitações de paginação.
5. Implementar visualizador de imagens usando a biblioteca PhotoSwipe

Atualizações de recursos

Por favor, verifique este documento: README do Programa de Coleta de Imagens