As ideias de Vue sobre a troca deslizante?

Primeira imagem acima:

se você deseja clicar na guia para alternar o conteúdo da página, ou na página ativa para alternar a guia, muitos componentes da interface do usuário podem fazer isso. Hoje, quero discutir como alternar as guias deslizando como o WeChat, que pode deslizar para a esquerda e para a direita, e deslizar uma página para cima e para baixo sem afetar a posição de rolagem das outras páginas. Se você usar componentes de interface do usuário, as subpáginas estarão todas em um div. Embora você possa deslizar para a esquerda e para a direita, desde que haja uma página rolando para cima e para baixo, todas as páginas rolarão para a mesma altura. Navegue por blogs ou plug-ins relacionados feitos no GitHub. A ideia geral é: as subpáginas são trocadas em uma e têm suas próprias rotas, assim como uma única página. Portanto, a respectiva altura de rolagem não deve ser afetada. Em seguida, como fazer o efeito de troca de diferentes rotas ocorrer, o site oficial vue apresenta o efeito de transição, transição de uso. O botão deslizante de página usa vue-touch, que é um componente de botão deslizante relativamente simples. Deixe a página rolar uma certa distância e deslize a página para a esquerda e direita para retornar à página original, ou mantenha a altura de rolagem, use keep-alive. A ideia é provavelmente assim. Minha demonstração está no GitHub: https://github.com/520zzj/router-swipe, esta é uma demonstração em que vue desliza para a esquerda e para a direita para alternar entre as guias. A demonstração está completa e pode ser usada depois baixando. Se um erro for relatado, npm install primeiro e depois execute-o. O efeito de transição não é bom e há um problema com o uso de keep-alive, o que leva à incapacidade de obter o efeito de cache. Espero que receba alguns conselhos dos deuses que passam. Na figura, o primeiro clique é para alternar o conteúdo da página por guia, e o último é para alternar guia deslizando o conteúdo.