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 相关文章推荐
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python实现排序算法解析
2018/09/08 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
python 初始化一个定长的数组实例
2019/12/02 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
门卫岗位安全职责
2013/12/13 职场文书
班主任工作经验材料
2014/02/02 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
解除合同协议书范本
2016/03/21 职场文书
六年级情感作文之500字
2019/10/23 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL