How to implement paging components in vue

This article mainly introduces the sample code of a paging component of vue. Now I will share it with you and give you a reference.

Paging components are often used in projects. Before, I always found some jq controls on the Internet to use (escape...). Recently, several projects have used vue and the project just needs a paging function. . The details are as follows:

The file page.vue is a PC-side paging component. It has basic paging functions. The basic idea is that the page is displayed using data, so directly operate the relevant data to change the view

Getting started

import Page from './page.vue' Import the file from the directory and register it in the parent component using

<page :total=&#39;total&#39; :current-index="currentIndex" :listLen=&#39;listLen&#39; @getPage=&#39;getPage&#39;></page>

total: total Page number
currentIndex: current page number
listLen: How many list pages the page ui should display
getPage: The page component sends the page number of each event to the parent component, which is used to send relevant requests to the background to display the content

about page.vue

html part

<ul class="item" v-show="arr.length">
    <li @click="start">首页</li>
    <li @click="pre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><<</a></li>  上一列表页
    <li @click="currentPre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><</a></li>   点解当前列表页上一页
    <li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li>
    <li @click="currentNext"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >></a></li>  点解当前列表页下一页
    <li @click="next"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >>></a></li>  下一列表页
    <li @click="end">尾页</li>
  </ul>

Related data description

data() {
  return {
   num: Number, //表示当前页码高亮
   arr: [], //页面显示的数组
   page: Number, //一页显示多少个,可以自定义,不能大于总页码
   Remainder:Number, //是否整除
   merchant:Number, // 比较总页数和page页
  };
 },
 props: {
  //分页的总数
  total: {
   type: Number,
   default: 5
  },
  //当前页
  currentIndex: {
   type: Number,
   default: 1
  },
  //一个列表页显示多少页码
  listLen:{
   type: Number,
   default: 5
  }
 },

methods event, the main idea is to determine the first and last items of the current list page. Use a loop to loop through the value of the arr member

bash

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

I have written a similar one using ember.js before The component is now encapsulated based on vue2.0, which can be used in different projects in the future. It can be used directly.

Small summary: I have also come into contact with ng4 before, and found that these similar frameworks exclude transition animations and page displays. The page is rendered through data sent from the background or simulated by the front end. Of course, this is only a small part of the connection, and it is also the basic idea of ​​this type of framework.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About 2.x virtual scroll bar in vue.js

How to download excel files using AngularJS Function

How to configure config in vue (detailed tutorial)

How to implement multi-object movement in JS (detailed tutorial)

The above is the detailed content of How to implement paging components in vue. For more information, please follow other related articles on the PHP Chinese website!