网上搜的分页器大多是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)"> <div> <img :src="item.img" alt=""/> </div> <div> <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> <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>
一，首先自己写一个json文件（六条数据我就写两条吧，太长了），并在新闻组件里使用axios请求这个json文件：
{ "id": "1", "title": "新闻一", "time": "2017.10", "content": "新闻一的简介...", "imgSrc": "static/images/new1.png" }, { "id": "2", "title": "新闻二", "time": "2017.11", "content": "新闻二的简介...", "imgSrc": "static/images/new2.png" }, ...（总归六条数据省略四条不写）
需求：每页显示四条新闻
原理：
1、请求接口数据，生成HTML页面（利用axios请求json文件，v-for循环将数据排版）
2、动态生成分页器页码（根据json数据长度）：
利用axios请求json文件，需要用到两个数据：一个是json这段新闻的长度newListLength，一个是这段数据的自身newtList，对数据长度的处理方法是：
this.newListLength = Math.ceil((this.newListLength) /4)
因为我们的json数据就写了六个，故这样计算得到的长度就是2（数据长度大于4处理得到的数据就是2，小于等于4得到的数值为1），以此类推，将这个数据传入分页器作为页码
在分页器page组件中利用pros接收父级传来的处理过后的长度，得到需要展示的分页器页码长度，再把此长度传到分页器组件，v-for循环生成页码
3、利用v-if实现页面任意展示某一段json的数据，比如我有6条数据，一页只需要展示4条
<div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)">
在新闻组件中令newListPageIndex的默认值是1，那么v-if=（0 =< index <= 3）初始展示第一页数据嘛