Preface
In the work of the previous two chapters, we successfully implemented the home page rendering, but it was just rendering one page of data. We may need to render more data, so at this time, it is necessary for us to consider paging.
There are many ways to paging, such as asynchronous loading. However, for friends who do not use the front-end template framework, it may be a bit difficult to use this method as soon as they start. Therefore, the paging implementation of our chapter is based on ordinary link paging.
After we have more experience in using front-end frameworks, we can use a richer pagination method.
In fact, it is not impossible for us to build a paging component ourselves. On the mobile side, I implement it by my own code. However, what I want to recommend here is to use the layout page plugin, and its official website is (http://laypage.layui.com/).
Paging Rules Development
First, let's take a look at the interface description
Here is the get interface. Therefore, as shown in the figure above, the correct way to request is to directly append parameters after the Url of the interface.
http://cnodejs.org/api/v1/topics?page=11
OK, then our url address can be //xxx/index.shtml?1 Because I don't plan to use other parameters, just complete the pagination. Therefore, you can directly add the pagination id after it, and then obtain the id in the url through a function and append it to the interface, so that our needs can be realized.
Write code to implement!
Get the ID in the URL
As I thought above, we need a function that can correctly obtain the id we append to the URL address to greet you well.
function getUrlId(){ var host = window.location.href; var id = host.substring(host.indexOf("?")+1,host.length); return id;}As shown in the above code, through this function method, we can get the ID we appended after the url, and test it
$(function(){ var id = getUrlId(); console.log(id); var url = "http://cnodejs.org/api/v1/topics"; getJson(url, pushDom);});As shown in the figure below:
We obtain different data through ID
$(function(){ var id = getUrlId(); var url = "http://cnodejs.org/api/v1/topics?page="+id; getJson(url, pushDom);});As mentioned above, you can obtain different data according to different URLs.
Use layout to implement pagination
First of all, of course, is to reference the file.
<script src="res/js/plugins/laypage/laypage.js"></script>
In the appropriate part of the html, add the box to the paging component, as follows:
<div></div>
Then, we copy the code on the official website. Modify it appropriately, and the code is as follows
$(function(){ var id = getUrlId(); var url = "http://cnodejs.org/api/v1/topics?page="+id; getJson(url,pushDom); layout({ cont: $(".page"), pages: 100, curr: id, jump: function(e, first){ if(!first){ location.href = '?'+e.curr; } } });})The final effect is shown in the figure below:
summary
In this chapter, our content actually has little to do with VUE. However, no matter what content is used, it is ultimately aimed at completing the project. Using already developed plug-ins can greatly improve our efficiency.
appendix
VUE official website
cNodeJs API details
Download the source code of this series of tutorials
Chapter 1 of VUEJS Practical Tutorial, Building the Basics and Rendering the List
VUEJS practical tutorial Chapter 2, fix errors and beautify time
VUEJS practical tutorial Chapter 3, using the layout plug-in to realize pagination
This article was originally written by FungLeo
First release address: http://blog.csdn.net/FungLeo/article/details/51649074
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.