Prefácio
No trabalho dos dois capítulos anteriores, implementamos com sucesso a renderização da página inicial, mas estava apenas fazendo uma página de dados. Podemos precisar renderizar mais dados; portanto, neste momento, é necessário considerarmos a paginação.
Existem muitas maneiras de pagar, como carregamento assíncrono. No entanto, para amigos que não usam a estrutura do modelo front-end, pode ser um pouco difícil usar esse método assim que iniciarem. Portanto, a implementação de paginação de nosso capítulo é baseada na paginação de links comuns.
Depois de ter mais experiência no uso de estruturas front-end, podemos usar um método de paginação mais rico.
De fato, não é impossível construir um componente de paginação. No lado móvel, eu o implemento pelo meu próprio código. No entanto, o que eu quero recomendar aqui é usar o plugin da página de layout, e seu site oficial é (http://laypage.layui.com/).
Desenvolvimento de regras de paginação
Primeiro, vamos dar uma olhada na descrição da interface
Aqui está a interface Get. Portanto, como mostrado na figura acima, a maneira correta de solicitar é anexar diretamente os parâmetros após o URL da interface.
http://cnodejs.org/api/v1/topics?page=11
OK, nosso endereço URL pode ser //xxx/index.shtml?1 porque não pretendo usar outros parâmetros, basta concluir a paginação. Portanto, você pode adicionar diretamente o ID da paginação e obter o ID no URL através de uma função e anexá -lo à interface, para que nossas necessidades possam ser realizadas.
Escreva código para implementar!
Obtenha o ID no URL
Como pensei acima, precisamos de uma função que possa obter corretamente o ID que prendemos ao endereço da URL para cumprimentá -lo bem.
function geturlid () {var host = window.Location.href; var id = host.substring (host.indexof ("?")+1, host.length); Retornar id;}Conforme mostrado no código acima, através deste método de função, podemos obter o ID que anexamos após o URL e testá -lo
$ (function () {var id = geturlid (); console.log (id); var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);});Como mostrado na figura abaixo:
Obtemos dados diferentes através do ID
$ (function () {var id = geturlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom);});Como mencionado acima, você pode obter dados diferentes de acordo com diferentes URLs.
Use o layout para implementar a paginação
Primeiro de tudo, é claro, é fazer referência ao arquivo.
<script src = "res/js/plugins/laypage/laypage.js"> </script>
Na parte apropriada do HTML, adicione a caixa ao componente de paginação, como segue:
<div> </div>
Em seguida, copiamos o código no site oficial. Modifique -o adequadamente, e o código é o seguinte
$ (function () {var id = geturlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom); layout ({cont: $ (". '?'+E.Curr;O efeito final é mostrado na figura abaixo:
resumo
Neste capítulo, nosso conteúdo realmente tem pouco a ver com Vue. No entanto, não importa qual conteúdo seja usado, ele tem como objetivo concluir o projeto. O uso de plug-ins já desenvolvido pode melhorar muito nossa eficiência.
apêndice
Site oficial da VUE
Detalhes da API do CNODEJS
Baixe o código -fonte desta série de tutoriais
Capítulo 1 do tutorial prático de Vuejs, construindo o básico e renderizando a lista
Tutorial prático Vuejs Capítulo 2, corrija erros e embeleza o tempo
Tutorial prático Vuejs Capítulo 3, usando o plug-in de layout para realizar a paginação
Este artigo foi originalmente escrito por Fungleo
Endereço de lançamento: http://blog.csdn.net/fungleo/article/details/51649074
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.