preface

  1. Initialize the project using vue-CLI

  2. Manage data using VUEX

  3. Node v6.9.2, NPM v3.10.9

  • Paging effect preview: Demo

Principles of paging

  • Paging relies on two parameters, offset and limit. Click the page to send the Ajax request, and the two parameters are passed to the back end, which screens the corresponding data from the database and returns it to the front end. The front end adds the obtained data to the page, and the page component displays the corresponding page number according to the offset and limit number. This is a simple way to achieve paging.

Page type

  • Paging generally falls into two types, one that is often used for scrolling on mobile, or one that loads more with a button click. This kind of paging is relatively easy to implement. The front end only needs to define an offset variable, which is offset += limit for each Ajax request, and then append the retrieved content.

  • The other is to display the total number of pages, current number of pages, previous page, next page button, and the number of pages in the middle with ellipsis. This paging is slightly more complex to implement, but has a better user experience, and this article discusses how to implement such a paging component using VUE.

The paging component

  • Create the pagination.vue file.



    <template>
    <div class="page-wrap">
      <ul v-show="prePage" class="li-page" v-tap="{methods: goPrePage}">The previous page</ul>
      <ul>
        <li v-for="i in showPageBtn" :class="{active: i === currentPage, pointer: i, hover: i && i ! == currentPage}"
            v-tap="{methods: goPage, i: i}">
          <a v-if="i" class="notPointer">{{i}}</a>
          <a v-else>...</a>
        </li>
      </ul>
      <ul v-show="nextPage" class="li-page" v-tap="{methods: goNextPage}">The next page</ul>
    </div>

</template>Copy the code

  • The parent component communicates via props, and the paging component communicates with the parent component via $emit via events defined by the parent component. Therefore, the default value for the parent component to display is 30 (num) and 5 (limit)



    let that
export default{
    data(){
      that = this
      return{
        num: 30.limit: 5}}}Copy the code

  • Compute several variables, in this case using vUE’s computed property, computed

    • The totalPage should be equal to the total number of pages to be displayed divided by the number of pages to be displayed, rounded up, which makes sense.



        computed: {
      totalPage() {
        return Math.ceil(that.num / that.limit)
      }
    }Copy the code

    • The offset, because clicking on the next page or specifying the page number changes the offset variable, is also used by the parent component to send ajax requests, so vuEX is used to store offset.



        // pagination.vue
    computed: {
      offset() {
          return that.$store.state.offset
      }
    }Copy the code

    • CurrentPage, the currentPage is an important variable, showing the number of pages the user is currently on. Given the offset and the number of pages displayed per page, it can be concluded that the currentPage is the remainder of the two rounded up, because the number of pages does not start from 0, so



        computed: {
      currentPage() {
        return Math.ceil(that.offset / that.limit) + 1}}Copy the code

    • Whether to display the previous button prePage, because the offset on the home page is 0, so as long as the offset is not 0, the current page is definitely not the first page, display the previous button, and num is not 0.



        coumputed: {
      prePage() {
        returnthat.offset ! = =0 && that.num
      }
    }Copy the code

    • The nextPage button is displayed as long as the offset plus the number of pages displayed is less than the total number to be displayed, and num is not equal to 0.



        computed: {
      nextPage() {
        return (that.offset + that.limit < that.num) && that.num
      }
    }Copy the code

    • Page number calculation showPageBtn, page number calculation is the core content of this page component, the basic idea is when the total number of pages is not more than 5, display all pages; When the total number of pages is greater than 5, the first and last page numbers are always displayed. When the distance between the current page number and the home page is less than 2, the first three page numbers and ellipsis are displayed. If the distance between the current page number and the last page is less than 2, the last three pages are displayed. If the distance between the current page number and the first page number is 2, the first four pages and ellipsis are displayed. If the distance between the current page number and the last page is 2, the next four page numbers and ellipsis are displayed. If the distance between the current page number and the first page is greater than 3 and the distance between the last page and the current page number is greater than 3, the previous page and the next page of the current page number are displayed, with an ellipsis on both sides. Here we use 0 for ellipsis



        computed: {
      showPageBtn() {
          let pageNum = that.totalPage,
              index = that.currentPage,
              arr = []
          if (pageNum <= 5) {
            for(let i = 1; i <= pageNum; i++) {
              arr.push(i)
            }
            return arr
          }
          if (index< =2) return [1.2.3.0,pageNum]
          if (index >= pageNum -1) return [1.0, pageNum -2, pageNum -1, pageNum]
          if (index= = =3) return [1.2.3.4.0,pageNum]
          if (index === pageNum -2) return [1.0, pageNum-3, pageNum-2, pageNum-1, pageNum]
          return [1.0.index-1.index.index + 1.0, pageNum]
        }
    }Copy the code

  • Jump event, click previous page, next page, and specified page number respectively.



    methods: {
      goPage(params) {
        if (params.i === 0 || params.i === that.currentPage) return
        that.$store.commit('GO_PAGE', (params.i-1) * that.limit)
        that.$emit('getNew')},goPrePage() {
        that.$store.commit('PRE_PAGE', that.limit)
        that.$emit('getNew')},goNextPage() {
        that.$store.commit('NEXT_PAGE', that.limit)
        that.$emit('getNew')}}Copy the code

Vuex part

  • In this introduction to vuEX part of the implementation, learning two zhe big VUEX part of the structure. Vuex is initialized with mutation and vuex is initialized with mutation. Vuex is initialized with mutation and vuex is initialized with mutation.



    // vuex store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'

Vue.use(Vuex);

const state = {
offset: 0
};

export default new Vuex.Store({
state,
mutations
})Copy the code

  • Mutation-types. Js records all event names. In fact, the biggest advantage of this file is that it allows us to manage all vuEX methods more intuitively. At this point, mutation-types.js can manage these methods better and more intuitively. This is also a design concept, conducive to later maintenance.



    // mutation-types.js
export const PRE_PAGE = 'PRE_PAGE'
export const NEXT_PAGE = 'NEXT_PAGE'
export const GO_PAGE = 'GO_PAGE'Copy the code

  • Mutation. Js This is the core file of VUex, which registers all the events implemented, and we define methods for clicking on the previous page, next page, and jumping to the specified page.



    // mutation.js
import * as types from './mutation-types'

export default {
// page up
[types.PRE_PAGE] (state, offset) {
  state.offset -= offset
},
// page down
[types.NEXT_PAGE] (state, offset) {
  state.offset += offset
},
// Paging jumps to the specified page number
[types.GO_PAGE] (state, offset) {
  state.offset = offset
}
};Copy the code

how to run



$ npm install 

$ npm run dev

/Visit HTTP: / //localhost:8088/index.htmlCopy the code

My website: minemine.cc/ github address: github.com/luyilin

Did this article help you? Welcome to join the front End learning Group wechat group: