Vue分页器实现原理详解

本文为大家讲解了Vue分页器实现原理，供大家参考，具体内容如下

网上搜的分页器大多是jQuery实现的，而且也不太完善，于是自己写了个分页器组件，以后再用也不慌，直接复制过去就ok，下面说说具体实现的代码和原理吧。

新闻组件template：

<template> <div v-if="news"> <div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)" class="new-show-left"> <div class="new-img">  <img :src="item.img" alt=""/> </div> <div class="time">  <span>{{item.time}}</span> </div> <h1>{{item.title}}</h1> <p>{{item.content}}</p> </div> </div></template><script type="text/ecmascript-6"> import page from '@/components/page' import bus from '@/eventBus/eventBus' import {getNew} from '@/getData/getData' export default{ components: { page }, data () { return { newList: '', newList2: '', newListLength: '', newListPageIndex: '1', // 下标 next: false, previous: false, news: true, title: '' } }, created () { this.$nextTick(() => { this._init_list1() }) bus.$on('current-item', (ev) => { this.$nextTick(() => {  this.currentItem(ev) }) }) bus.$on('next-page', (ev) => { this.$nextTick(() => {  this.nextPage(ev) }) }) bus.$on('previous-page', (ev) => { this.$nextTick(() => {  this.previousPage(ev) }) }) }, methods: { _init_list1 () { getNew().then(res => {  this.newList = res.data.list1  let myObject = res.data.list1  this.newListLength = Object.keys(myObject).length  this.newListLength = Math.ceil((this.newListLength) / 6)  this.pageStyle() }) }, pageStyle () { if (this.newListPageIndex < this.newListLength) {  this.next = true  if (this.newListPageIndex > 1) {  this.previous = true  } else {  this.previous = false  } } else {  this.next = false  if (this.newListPageIndex > 1) {  this.previous = true  } else {  this.previous = false  } } }, currentItem (ev) { this.newListPageIndex = ev window.scrollTo(0, 500) this.pageStyle() }, nextPage () { if (this.newListPageIndex < this.newListLength) {  this.newListPageIndex ++  window.scrollTo(0, 500)  this.pageStyle() } }, previousPage () { if (this.newListPageIndex > 1) {  this.newListPageIndex --  window.scrollTo(0, 500)  this.pageStyle() } } } }</script>

分页器组件template：

<template> <ul class="page"> <li>  <img @click="previousPage" :src="[(previous==true ? 'static/images/leftGo-black.png' : 'static/images/leftGo.png')]">  <span @click="previousPage" :class="[(previous==true ? 'black-color' : 'gray-color')]">上一页</span> </li> <li >  <span @click="currentItem" v-for="(item, index) in listLength" :class="[(listPageIndex == index+1) ? 'gray-color':'black-color']">{{item}}</span> </li> <li>  <span @click="nextPage" :class="[(next == true ? 'black-color':'gray-color')]">下一页</span>  <img @click="nextPage" :src="[(next==true ? 'static/images/rightGo.png' : 'static/images/rightGo-gray.png')]"> </li> </ul></template><script type="text/ecmascript-6"> import bus from '@/eventBus/eventBus' export default{ props: { listLength: '', listPageIndex: '', next: '', previous: '' }, created () {// console.log(this.next) }, methods: { currentItem (ev) { bus.$emit('current-item', ev.target.innerHTML) }, nextPage (ev) { bus.$emit('next-page', ev) }, previousPage (ev) { bus.$emit('previous-page', ev) } } }</script>