Before always want to try to achieve a pager, but has been delayed, today write, probably according to netease cloud music to complete. This is a simple little example to learn about the use of Vue calculation properties and what needs to be distinguished by the write pager. This article will slowly from the beginning to achieve this small example, I believe you will learn, and read my train of thought after maybe there will be better ideas and ideas!
The result looks like this:
First, simple layout
<template>
<div class="pageContainer">
<ul class="pagesInner">
<li class="page"><span class="fa fa-chevron-left" aria-hidden="true"></span></li>
<li class="page" v-for="(item, index) in pages" :key="index">
<span>{{item}}</span>
</li>
<li class="page"><span class="fa fa-chevron-right" aria-hidden="true"></span></li>
</ul>
</div>
</template>
<script>
export default {
computed: {
pages() {
return10; }}}; </script>Copy the codeThe effect is as follows:
Two points:
- Font awesome CDN for the first and last two ICONS
- The data rendered using V-for uses pages in calculated properties, temporarily writing a data 11, so rendering 11 tags
Second, clear thinking is the most important thing in this case
The example of this article refers to the paging method in netease cloud music.
It has several features:
- The front page and the back page are always there
- There are at most 11 tabs, including two… , but they can’t be clicked, so I’ll also set the page number in the example to 11
- When the current page changes, the shape of the page number also changes. There are three cases in all, which will be discussed below
Three cases of paging:
First: when the current page number is less than or equal to 5
As shown in figure:
In this case, the last page of the home page is reserved, and the penultimate page is… Page numbers from the beginning
Second case: when the current page number is in the last 5
As shown in figure:
The first and last pages remain, and the second page number is… Page numbers are counted forward from the end
Third case: when the page is in the middle
As shown in figure:
The first and last pages remain, and the second and penultimate page numbers are… , and the page is counted sideways from the current page number position
Three, use code to implement the above three cases
CurrentPage :1 in data and totalPages:50 in totalPages:50
Let’s write the first case:
<script>
export default {
data() {
return {
currentPage: 1,
totalPages: 50
}
},
computed: {
pages() {
const c = this.currentPage
const t = this.totalPages
if (c <= 5) {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, '... ', t]
}
}
}
};
</script>
Copy the codeThe effect is as follows:
Write the second case and add an if:
<script>
export default {
data() {
return {
currentPage: 47,
totalPages: 50
}
},
computed: {
pages() {
const c = this.currentPage
const t = this.totalPages
if (c <= 5) {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, '... ', t]
} else if (c >= t - 4) {
return [1, '... ', t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t]
}
}
}
};
</script>
Copy the codeCurrentPage = >= 46
Add the third case:
computed: {
pages() {
const c = this.currentPage
const t = this.totalPages
if (c <= 5) {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, '... ', t] // First case}else if (c >= t - 4) {
return [1, '... '7, 8, t - t -, t - 6, 5, t - t - 4, 3, t - t - 2, t - 1, t] / / the second}else {
return [1, '... ', c-3, c-2, c-1, c, c+1, c+2, c+3, '... ', t] // Third case}}}Copy the codeThat’s basically it. You can already see how the pager changes by changing the currentPage value.
Click on the corresponding page number to change the currentPage value, just write a click event and write a function.
<li class="page"
v-for="(item, index) in pages"
:key="index"
:class="{actived: item === currentPage}"// Add style @click= to the current page number clicked on"select(item)"// Add a click event >... methods: { select(item) { this.currentPage = item } } ... actived: { border-color:#2d8cf0;
background-color: #2d8cf0;
color: #fff;
}
Copy the codeThe effect is as follows:
To make the current page number clearer, add the current number of pages to the page
{{currentPage}} page </div>Copy the codeThe effect is as follows:
We found a bug that every time we click, the specific content of the item is passed to change the currentIPage, but when we click… But it is not the data of the page number we want, and there is an error in the calculation, so we need to do some processing. There is also no need to perform the select function when clicking the current page number again.
Here’s a simple rewrite of the select function:
select(n) {
if (n === this.currentPage) return
if (typeof n === 'string') return
this.currentPage = n
}
Copy the codeThat’s normal.
Add the functions of the ICONS one page ahead and one page back, because one is plus one and the other is minus one, so write a function passing different parameters.
<li class="page" @click="prevOrNext(-1)"><span class="fa fa-chevron-left" aria-hidden="true"></span></li>
...
<li class="page" @click="prevOrNext(1)"><span class="fa fa-chevron-right" aria-hidden="true"></span></li>
...
prevOrNext(n) {
this.currentPage += n
}
Copy the codeThe effect is as follows:
Well, the boundary problem, it can’t be subtracted when currentPage is 1, and it can’t be added when it’s Max.
Rewrite the code:
prevOrNext (n) {
this.currentPage += n
this.currentPage < 1
? this.currentPage = 1
: this.currentPage > this.totalPages
? this.currentPage = this.totalPages
: null
}
Copy the codeThis is ok, as shown in the picture:
Four, conclusion
We can also use this.$emit to notify the outside of currentPage every time it changes. We can also use props to pass data in, such as totalPages. The most important point, about the pager specific calculation method, I use is the most stupid method, so comrades if you know a better way to remember message ah ~
This is my fifth post on the Nuggets, thanks for watching!