Vue分页器实现原理详解


Posted in Javascript onJune 28, 2019

本文为大家讲解了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>

一,首先自己写一个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)初始展示第一页数据嘛

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']"

上一页下一页以及页码都是通过newListPageIndex相联系的,所以当我点击页码或者上一页下一页他们的样式颜色都会相互影响改变,实现思路大抵如上了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
js实现前端分页页码管理
Jan 06 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
vue实现分页栏效果
Jun 28 #Javascript
js实现简单分页导航栏效果
Jun 28 #Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 #Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 #Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 #Javascript
微信小程序身份证验证方法实现详解
Jun 28 #Javascript
jQuery属性选择器用法实例分析
Jun 28 #jQuery
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
JavaScript 学习技巧
2010/02/17 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python实现八皇后问题示例代码
2018/12/09 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python如何操作docker redis过程解析
2020/08/10 Python
Python进行特征提取的示例代码
2020/10/15 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
后勤采购员岗位职责
2013/12/19 职场文书
初中地理教学反思
2014/01/11 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
环境科学专业求职信
2014/08/04 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
同志主要表现材料
2014/08/21 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
个人廉洁自律总结
2015/03/06 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis