Vue分页器实现原理

这期内容当中小编将会给大家带来有关Vue分页器实现原理,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

成都创新互联公司专注于周口网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供周口营销型网站建设,周口网站制作、周口网页设计、周口网站官网定制、小程序定制开发服务,打造周口网络公司原创品牌,更为您提供周口网站排名全网营销落地服务。

新闻组件template:



 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()
 }
 }
 }
 }

分页器组件template:




 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)
 }
 }
 }

一,首先自己写一个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条

= (newListPageIndex-1) * 4)">

在新闻组件中令newListPageIndex的默认值是1,那么v-if=(0 =< index <= 3)初始展示第一页数据嘛

4、上面三步实现了几个功能,展示任意一段数据,分页器随json内取的这段数据动态生成页码。下面要做联动,分页器页码点击对应展示相应区域的json数据。

当前点击页码上的点击事件是currentItem,利用emit提交当前节点,获取页码数字,父组件emit提交当前节点,获取页码数字,父组件on接收这个页码数字。

令this.newListPageIndex = ev,这样就会引起v-if里面计算表达式的改变,如果是点击的1,那么v-if=”(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)”。计算结果是0=< index <=7,即展示json里下标为0到3的4条数据,类推,如果点击的是2,则展示下标为4=< index <=7的数据。

5、还差一点功能是上一页和下一页的点击事件,这个类似点击页码,不同的是点击页码传递的数据是当前页码数字,而点击上或下一页,是让父组件接收指令,因为当前的newListPageIndex受到分页器页码的控制,所以只需要操作newListPageIndex令其- -或者++即可,要注意的是第一页时肯定不能点上一页了,尾页不能点下一页,所以,newListPageIndex令其–(起码要大于1对吧,2-1=1最小退到第一页哈)或者++(要小于数据的总长度)要写在if语句里面

if (this.newListPageIndex < this.newListLength) {
  this.newListPageIndex ++
 }
if (this.equipmentListPageIndex > 1) {
  this.newListPageIndex --
 }

6、最后就是页码与上页下页style颜色显示的问题,这里设置是处于当前页码状态时,当前页码处于是灰色不能点击,其它页码是黑色可点击。处于第一页时上一页灰色不可点击而下一页的样式反之,处于末页下一页灰色不可点击而上一页的样式反之
处理思路是,利用三元表达式来判断。当页码通过v-for遍历,因为当前展示区域控制数据的是newListPageIndex(起始加载默认为1),这时只要让页码下标index+1(因为下标从零开始,而长度从1开始)与newListPageIndex相等的那个页码块为灰色不可点击而其它的页码为黑色可点击即可。计算思路如下:

v-for="(item, index) in newListLength" :key="index" :class="[(newListPageIndex == index+1) ? 'gray-color':'black-color']"

上述就是小编为大家分享的Vue分页器实现原理了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


本文题目:Vue分页器实现原理
链接URL:http://scyanting.com/article/giceec.html