search
HomeWeb Front-endJS TutorialVue makes paginator

Vue makes paginator

Jun 06, 2018 pm 03:19 PM
vuePaginationPaginator

This time I will bring you Vue to make a pager. What are the precautions for making a pager with Vue? The following is a practical case, let's take a look.

I have always wanted to try to implement a paging device by myself, but I kept procrastinating. I finished it today, and I probably finished it in the same way as NetEase Cloud Music. This small example is very simple. Through this small example, you can learn the use of Vue calculated properties and understand the situations that need to be distinguished when writing a pager. This article will slowly implement this small example from scratch. I believe you will learn it, and maybe you will have better ideas and ideas after reading my ideas!

The effect achieved is like this:

##1. First, simple layout

<template>
 <p>
  </p>
<ul>
   <li><span></span></li>
   <li>
    <span>{{item}}</span>
   </li>
   <li><span></span></li>
  </ul>
 
</template>
<script>
export default {
 computed: {
  pages() {
   return 10;
  }
 }
};
</script>
The effect is as follows:

There are two places to mention:

  1. The first and last two icons are used font awesome's cdn

  2. The data rendered using v-for uses pages in the calculated attribute. A data of 11 is temporarily written, so 11 tags are rendered

2. Clarify your thoughts, which is the most important in this example

The example in this article refers to the paging method in NetEase Cloud Music. NetEase’s picture:

It has several characteristics:

  1. The homepage and last page always have

  2. At most there are 11 tabs, including two..., but they cannot be clicked, so I also set the page number in the example to 11

  3. When the current page changes, the form of the page number will also change. There are three situations in total. The following will detail the three situations of

paging:

First Type: When the current page number is less than or equal to 5

As shown in the figure:

In this case, the first and last pages are retained, and the penultimate page is... , the page number is counted from the beginning to the end

Second case: When the current page number is at the last 5

As shown:

Home page and the last page are still retained, the second page number is..., the page number is counted from the end to the front

The third situation: when the page is in the middle position

As shown in the figure:

The first and last pages are retained, the second page number and the penultimate page number are both..., and the page is counted from the current page number position to both sides

3. Use code to realize the above three situations

From the above idea, how the page number is presented is determined by the position of the current page number, so we need to set it in the data A currentPage:1, and the pages used to render the page number in the calculated attribute are controlled by currentPage, and a total page number totalPages:50 is also required.

Write the first situation first:

<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, &#39;...&#39;, t]
   }
  }
 }
};
</script>
The effect is as follows:

##Write the second situation 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, &#39;...&#39;, t]
   } else if (c >= t - 4) {
    return [1, &#39;...&#39;, t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t]
   }
  }
 }
};
</script>

Set the value of currentPage to >= 46, the effect is as follows:

Add the third situation:

computed: {
  pages() {
   const c = this.currentPage
   const t = this.totalPages
   if (c = t - 4) {
    return [1, '...', t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t] //第二种情况
   } else {
    return [1, '...', c-3, c-2, c-1, c, c+1, c+2, c+3, '...', t] //第三种情况
   }
  }
 }

That's basically it. You can already see the changes in the pager by changing the value of currentPage.

Next, to change the value of currentPage by clicking on the corresponding page number, just write a click event and a function.


  • ... methods: {   select(item) {     this.currentPage = item   } } ... actived: {   border-color: #2d8cf0;   background-color: #2d8cf0;   color: #fff; }

    The effect is as follows:

    为了让当前页码更清楚,再在页面上加上当前多少页

    <p>当前第{{currentPage}}页</p>

    效果如下:

    发现了一bug,就是我们每次点击的时候,都是将item的具体内容传递过去改变currentIPage的,但是当我们点的 ... 的时候就把它也传递过去了,但是它不是我们要的页码的数据,在计算的时候就出错了,所以我们需要做一点处理。同时,还有再点击当前页码的时候也不必再执行select函数了。

    简单改写一下select函数:

    select(n) {
      if (n === this.currentPage) return 
      if (typeof n === 'string') return 
      this.currentPage = n
    }

    这样就正常了。

    再把两侧icon向前一页和向后一页的功能加上,因为一个是加1一个是减1,所以写一个函数传递不同的参数就行了。

    
    
  • ...
  • ... prevOrNext(n) {   this.currentPage += n }

    效果如下:

    呃,边界问题,当currentPage为1时就不能再减了,当它为最大时也不能再加了。

    改写一下代码:

    prevOrNext (n) {
     this.currentPage += n
     this.currentPage  this.totalPages
      ? this.currentPage = this.totalPages
      : null
    }

    这下就可以了,如图:

    四、 结语

    写到这里,这个分页器基本功能就写完了,当然,我们还可以继续封装,在每次改变currentPage的时候用this.$emit通知外面实现通信,还可以通过props来向内传递数据,比如传递totalPages等,这些都是可以继续完善的内容。最重要的一点,关于分页器的具体计算方法,我用的是最笨的方法,所以同志们要是知道更好的办法记得留言啊~

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    怎样对JS+TypeScript中class进行使用

    JS怎样使用前后端同构

    The above is the detailed content of Vue makes paginator. For more information, please follow other related articles on the PHP Chinese website!

    Statement
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

    JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

    C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

    C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

    From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

    JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

    Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

    Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

    The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

    C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

    JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

    JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

    JavaScript and the Web: Core Functionality and Use CasesJavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

    The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

    Understanding the JavaScript Engine: Implementation DetailsUnderstanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

    Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    WebStorm Mac version

    WebStorm Mac version

    Useful JavaScript development tools

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Powerful PHP integrated development environment

    SecLists

    SecLists

    SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)