A paging component based on vue2.0 encapsulation

File page.vue is a PC side paging component, the basic paging function has, the basic idea is that the page is displayed with data, that directly manipulate the relevant data to change the view

Getting started

Import Page from ‘./page.vue’ imports this file from the directory and registers it with the parent component

<page :total='total' :current-index="currentIndex" :listLen='listLen' @getPage='getPage'></ Page > Total: total page number currentIndex: current page number listLen: Page UI to display several list pages getPage: Page Component sends the page number of each event to the parent component, which is used to send related requests to the background to display the contentCopy the code

about page.vue

HTML part

 <ul class="item" v-show="arr.length">
       <li @click="start""> </li> < li@click ="pre"><a href="javascript:;"><<</a></li> Previous list page < li@click ="currentPre"><a href="javascript:;"><</a></li> Click on the previous page of the current list page <li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li>
       <li @click="currentNext"><a href="javascript:;">></a></li> Click the next page of the current list page < li@click ="next"><a href="javascript:;">>></a></li> Next list page < li@click ="end"> </li> </ul>Copy the code

Related data Description

data() {
   return{num: Number, // highlight the current page Number arr: [], // display the page array page: Merchant :Number // merchant:Number // merchant:Number // merchant:Number // merchant:Number }, props: {// Total number of pages total: {type: Number, default: 5}, //type: Number, default: 1}, // How many page numbers to display on a list pagetype: Number, default: 5}}, methods: check the first and last items in the list page. GetPage (index) {this.num = index; getPage(index) {this.num = index; this.getPageNum(index); }, // Click the home pagestart() {
     let [firstIndex]=this.arr;
     if (firstIndex === 1) {
       alert("It's already the first list");
       return; } this.pagination(); this.getPageNum(this.num); }, // Click on the back pageend() {
     letlastIndex = this.total + 1; // Total page number increment 1let[first] = this.arr; // Get the first item of the arraylettemp = []; // Set a temporary array to copyif (this.arr[this.arr.length - 1] === this.total) {
       alert("This is the last list page.");
       return;
     }
     if(this.remainder === 0) {// Whether the Remainder is divisiblefor (let i = this.page; i > 0; i--) {
         temp.push(last - i);
       }
       this.arr = temp;
       [this.num]=this.arr
     } else {
       for (leti = this.Remainder; i > 0; i--) { temp.push(lastIndex - i); } this.arr = temp; [this.num]=this.arr } this.getPageNum(this.num); }, see the code at the bottomCopy the code
 bash
# install dependencies
npm install

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

# build for production with minification
npm run build


Copy the code

We wrote a similar component in ember.js, but now we have a package based on Vue2.0 that we can use for different projects and use directly. Summary: I have come into contact with NG4 before, and found that these similar frameworks exclude transition animation and render pages by sending data from the background or simulating data from the front end. Of course, this is only a small part of the same, which is also the basic idea of this kind of framework. The code address: https://github.com/hgchenhao/component