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 相关文章推荐
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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
第九节 绑定 [9]
2006/10/09 PHP
用PHP实现多级树型菜单
2006/10/09 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
理解Python垃圾回收机制
2016/02/12 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python设置环境变量的原因和方法
2019/06/24 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
配置管理计划的主要内容有哪些
2014/06/20 面试题
金融学专科生自我鉴定
2014/02/21 职场文书
《王二小》教学反思
2014/02/27 职场文书
大学军训感言400字
2014/03/11 职场文书
爱我中华演讲稿
2014/05/20 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
宪法宣传标语100条
2019/10/15 职场文书