Prefacio
En el trabajo de los dos capítulos anteriores, implementamos con éxito la representación de la página de inicio, pero solo estaba haciendo una página de datos. Es posible que necesitemos representar más datos, por lo que en este momento, es necesario que consideremos la paginación.
Hay muchas formas de paginar, como la carga asíncrona. Sin embargo, para los amigos que no usan el marco de plantilla front-end, puede ser un poco difícil usar este método tan pronto como comienzan. Por lo tanto, la implementación de la paginación de nuestro capítulo se basa en la paginación de enlaces ordinarios.
Después de tener más experiencia en el uso de marcos front-end, podemos usar un método de paginación más rico.
De hecho, no es imposible para nosotros construir un componente de paginación nosotros mismos. En el lado móvil, lo implemento con mi propio código. Sin embargo, lo que quiero recomendar aquí es usar el complemento de la página de diseño, y su sitio web oficial es (http://laypage.layui.com/).
Desarrollo de reglas de paginación
Primero, echemos un vistazo a la descripción de la interfaz
Aquí está la interfaz Get. Por lo tanto, como se muestra en la figura anterior, la forma correcta de solicitar es agregar directamente los parámetros después de la URL de la interfaz.
http://cnodejs.org/api/v1/topics?page=11
Ok, entonces nuestra dirección de URL puede ser //xxx/index.shtml?1 porque no planeo usar otros parámetros, simplemente complete la paginación. Por lo tanto, puede agregar directamente el ID de paginación después de él, y luego obtener la ID en la URL a través de una función y agregarla a la interfaz, para que nuestras necesidades puedan realizarse.
¡Escribir código para implementar!
Obtenga la identificación en la URL
Como pensé anteriormente, necesitamos una función que pueda obtener correctamente la ID que agregamos a la dirección de URL para saludarlo bien.
function getUrlid () {var host = window.location.href; var id = host.substring (host.indexof ("?")+1, host.length); ID de retorno;}Como se muestra en el código anterior, a través de este método de función, podemos obtener la ID que agregamos después de la URL y probarlo
$ (function () {var id = getUrlid (); console.log (id); var url = "http://cnodejs.org/api/v1/Topics"; getJson (url, pushdom);});Como se muestra en la figura a continuación:
Obtenemos diferentes datos a través de ID
$ (function () {var id = getUrlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom);});Como se mencionó anteriormente, puede obtener diferentes datos de acuerdo con diferentes URL.
Use el diseño para implementar la paginación
En primer lugar, por supuesto, es hacer referencia al archivo.
<script src = "res/js/plugins/laypage/laypage.js"> </script>
En la parte apropiada del HTML, agregue el cuadro al componente de paginación, como sigue:
<div> </div>
Luego, copiamos el código en el sitio web oficial. Modificarlo adecuadamente, y el código es el siguiente
$ (function () {var id = getUrlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom); LEING ({cont: $ (". Page "), páginas: 100, Curr: Id, Jump: function (e, primero) {if (if (if ((ubicación) {Ubicación) '?'+E.Curr;El efecto final se muestra en la figura a continuación:
resumen
En este capítulo, nuestro contenido en realidad tiene poco que ver con Vue. Sin embargo, no importa qué contenido se use, finalmente tiene como objetivo completar el proyecto. El uso de complementos ya desarrollados puede mejorar en gran medida nuestra eficiencia.
apéndice
Sitio web oficial de VUE
Detalles de la API de CNODEJS
Descargue el código fuente de esta serie de tutoriales
Capítulo 1 del tutorial práctico de Vuejs, construyendo los conceptos básicos y presentando la lista
Tutorial práctico de Vuejs Capítulo 2, corrige errores y embellece el tiempo
Tutorial práctico de Vuejs Capítulo 3, utilizando el complemento de diseño para realizar la paginación
Este artículo fue escrito originalmente por Fungleo
Primera dirección de lanzamiento: http://blog.csdn.net/fungleo/article/details/51649074
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.