머리말
이전 두 장의 작업에서 우리는 홈페이지 렌더링을 성공적으로 구현했지만 한 페이지의 데이터를 렌더링했습니다. 더 많은 데이터를 렌더링해야 할 수도 있으므로 현재 페이징을 고려해야합니다.
비동기 적재와 같은 페이징 방법에는 여러 가지가 있습니다. 그러나 프론트 엔드 템플릿 프레임 워크를 사용하지 않는 친구의 경우 시작 하자마자이 방법을 사용하기가 약간 어려울 수 있습니다. 따라서 우리 장의 페이징 구현은 일반 링크 페이징을 기반으로합니다.
프론트 엔드 프레임 워크 사용에 대한 경험이 더 많으면 더 풍부한 페이지 매김 방법을 사용할 수 있습니다.
사실, 우리가 페이징 구성 요소를 직접 구축하는 것은 불가능하지 않습니다. 모바일 측면에서 나는 내 자신의 코드로 구현합니다. 그러나 여기서 권장하는 것은 레이아웃 페이지 플러그인을 사용하는 것입니다. 공식 웹 사이트는 (http://laypage.layui.com/)입니다.
페이징 규칙 개발
먼저 인터페이스 설명을 살펴 보겠습니다
Get 인터페이스는 다음과 같습니다. 따라서 위 그림과 같이, 요청하는 올바른 방법은 인터페이스의 URL 이후에 매개 변수를 직접 추가하는 것입니다.
http://cnodejs.org/api/v1/topics?page=11
자, URL 주소는 //xxx/index.shtml?1이 될 수 있습니다. 따라서 그 후에 Pagination ID를 직접 추가 한 다음 함수를 통해 URL에서 ID를 얻고 인터페이스에 추가하여 요구 사항을 실현할 수 있습니다.
구현하려면 코드를 작성하십시오!
URL에서 ID를 가져옵니다
위에서 생각했듯이 URL 주소에 추가 된 ID를 올바르게 얻을 수있는 기능이 필요합니다.
함수 geturlid () {var host = window.location.href; var id = host.substring (host.indexof ( "?")+1, host.length); 반환 ID;}위 코드에 표시된 대로이 함수 메소드를 통해 URL 이후에 추가 된 ID를 가져 와서 테스트 할 수 있습니다.
$ (function () {var id = geturlid (); console.log (id); var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);});아래 그림과 같이 :
우리는 ID를 통해 다른 데이터를 얻습니다
$ (function () {var id = geturlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom);});위에서 언급했듯이 다른 URL에 따라 다른 데이터를 얻을 수 있습니다.
레이아웃을 사용하여 페이지 매김을 구현하십시오
우선, 물론 파일을 참조하는 것입니다.
<script src = "res/js/plugins/laypage/laypage.js"> </script>
HTML의 적절한 부분에서 다음과 같이 PAGING 구성 요소에 상자를 추가하십시오.
<div> </div>
그런 다음 공식 웹 사이트에서 코드를 복사합니다. 적절하게 수정하면 코드는 다음과 같습니다
function () {var id = geturlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom); 레이아웃 ({cont : $ (". "), 페이지 : 100, curr : id, j }}});})최종 효과는 아래 그림에 나와 있습니다.
요약
이 장에서는 우리의 콘텐츠는 실제로 VUE와 거의 관련이 없습니다. 그러나 어떤 콘텐츠가 사용하든 궁극적으로 프로젝트를 완료하는 것을 목표로합니다. 이미 개발 된 플러그인을 사용하면 효율성을 크게 향상시킬 수 있습니다.
충수
VUE 공식 웹 사이트
cnodejs API 세부 사항
이 일련의 튜토리얼의 소스 코드를 다운로드하십시오
vuejs 실용 튜토리얼, 기본 사항 구축 및 목록 렌더링 제 1 장
vuejs 실용 튜토리얼 2 장, 오류 수정 및 시간을 아름답게합니다.
Vuejs 실용 튜토리얼 3 장, 레이아웃 플러그인을 사용하여 페이지 매김을 실현합니다.
이 기사는 원래 Fungleo가 작성했습니다
첫 번째 릴리스 주소 : http://blog.csdn.net/fungleo/article/details/51649074
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.