用Vue写一个分页器的示例代码


Posted in Javascript onApril 22, 2018

之前一直想要自己试着实现一个分页器,但是一直拖,今天写完,大概照着网易云音乐的样子来完成。这个小例子很简单,通过这个小例子,可以学习到Vue计算属性的使用,并了解到写分页器需要区分的情况。这篇文章会慢慢从头来实现这个小例子,相信你一定会学会,而且看完了我的思路之后说不定会有更棒的思路和想法!

实现的效果是这样子的:

用Vue写一个分页器的示例代码

一、先简单布局

<template>
 <div class="pageContainer">
  <ul class="pagesInner">
   <li class="page"><span class="fa fa-chevron-left" aria-hidden="true"></span></li>
   <li class="page" v-for="(item, index) in pages" :key="index">
    <span>{{item}}</span>
   </li>
   <li class="page"><span class="fa fa-chevron-right" aria-hidden="true"></span></li>
  </ul>
 </div>
</template>

<script>
export default {
 computed: {
  pages() {
   return 10;
  }
 }
};
</script>

效果如下:

用Vue写一个分页器的示例代码

有两个地方说下:

  1. 最前面和最后面两个icon用的font awesome的cdn
  2. 使用v-for来进行渲染的数据用的是计算属性里的pages,暂时写了一个数据11,所以渲染出了11个标签

二、理清思路,在这个例子里最重要

这篇文章的例子是参照了网易云音乐里的分页方法,网易的图:

用Vue写一个分页器的示例代码

它有几个特点:

  1. 首页和尾页一直都有
  2. 最多时候有11个标签页,包括两个 ... ,但是它们不能点击,所以我也把例子里的页码设为11
  3. 在当前页变动的时候,页码的形态也会发生变化,总共有三种情况,这个下面会细说

分页的三种情况:

第一种:当前页码小于等于5的时候

如图:

用Vue写一个分页器的示例代码

这种情况首页尾页保留,倒数第二个页面为..., 页码从头往后算

第二种情况:当前页码处于最后5个的时候

如图:

用Vue写一个分页器的示例代码

首页和尾页依然保留,第二个页码为...,页码从最后向前算

第三种情况:页面处于较中间位置的时候

如图:

用Vue写一个分页器的示例代码

首页和尾页都保留,第二个页码和倒数第二个页码都为 ... ,同时页面从当前页码位置向两侧算

三、用代码来实现上面的三种情况

从上面的思路来看,页码具体如何呈现由当前页码的位置决定,所以我们要在data里设置一个currentPage:1,而计算属性里用于渲染页码的pages通过currentPage来控制,同时还需要一个总页数totalPages:50。

先写第一种情况:

<script>
export default {
 data() {
  return {
   currentPage: 1,
   totalPages: 50
  }
 },
 computed: {
  pages() {
   const c = this.currentPage
   const t = this.totalPages
   if (c <= 5) {
    return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t]
   }
  }
 }
};
</script>

效果如下:

用Vue写一个分页器的示例代码

写第二种情况,再加个if:

<script>
export default {
 data() {
  return {
   currentPage: 47,
   totalPages: 50
  }
 },
 computed: {
  pages() {
   const c = this.currentPage
   const t = this.totalPages
   if (c <= 5) {
    return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t]
   } else if (c >= t - 4) {
    return [1, '...', t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t]
   }
  }
 }
};
</script>

把currentPage的值设为>= 46,效果如下:

用Vue写一个分页器的示例代码

把第三种情况加上:

computed: {
  pages() {
   const c = this.currentPage
   const t = this.totalPages
   if (c <= 5) {
    return [1, 2, 3, 4, 5, 6, 7, 8, 9, '...', t] //第一种情况
   } else if (c >= t - 4) {
    return [1, '...', t-8, t-7, t-6, t-5, t-4, t-3, t-2, t-1, t] //第二种情况
   } else {
    return [1, '...', c-3, c-2, c-1, c, c+1, c+2, c+3, '...', t] //第三种情况
   }
  }
 }

基本就是这样,已经可以通过改变currentPage的值查看分页器的变化了。

接下来实现点击相应的页码来改变currentPage的值,只要写一个点击事件再写一个函数就好了。

<li class="page" 
  v-for="(item, index) in pages" 
  :key="index"
  :class="{actived: item === currentPage}"  // 给点击到的当前页码添加样式
  @click="select(item)"   // 添加一个点击事件
>

...

methods: {
  select(item) {
    this.currentPage = item
  }
}

...

actived: {
  border-color: #2d8cf0;
  background-color: #2d8cf0;
  color: #fff;
}

效果如下:

用Vue写一个分页器的示例代码

为了让当前页码更清楚,再在页面上加上当前多少页

<div>当前第{{currentPage}}页</div>

效果如下:

用Vue写一个分页器的示例代码

发现了一bug,就是我们每次点击的时候,都是将item的具体内容传递过去改变currentIPage的,但是当我们点的 ... 的时候就把它也传递过去了,但是它不是我们要的页码的数据,在计算的时候就出错了,所以我们需要做一点处理。同时,还有再点击当前页码的时候也不必再执行select函数了。

简单改写一下select函数:

select(n) {
  if (n === this.currentPage) return 
  if (typeof n === 'string') return 
  this.currentPage = n
}

这样就正常了。

再把两侧icon向前一页和向后一页的功能加上,因为一个是加1一个是减1,所以写一个函数传递不同的参数就行了。

<li class="page" @click="prevOrNext(-1)"><span class="fa fa-chevron-left" aria-hidden="true"></span></li>

...

<li class="page" @click="prevOrNext(1)"><span class="fa fa-chevron-right" aria-hidden="true"></span></li>

...

prevOrNext(n) {
  this.currentPage += n
}

效果如下:

用Vue写一个分页器的示例代码

呃,边界问题,当currentPage为1时就不能再减了,当它为最大时也不能再加了。

改写一下代码:

prevOrNext (n) {
 this.currentPage += n
 this.currentPage < 1
 ? this.currentPage = 1
 : this.currentPage > this.totalPages
  ? this.currentPage = this.totalPages
  : null
}

这下就可以了,如图:

用Vue写一个分页器的示例代码

四、 结语

写到这里,这个分页器基本功能就写完了,当然,我们还可以继续封装,在每次改变currentPage的时候用this.$emit通知外面实现通信,还可以通过props来向内传递数据,比如传递totalPages等,这些都是可以继续完善的内容。最重要的一点,关于分页器的具体计算方法,我用的是最笨的方法,所以同志们要是知道更好的办法记得留言啊~

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

Javascript 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
React实现轮播效果
Aug 25 Javascript
vue-cli3.0 特性解读
Apr 22 #Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 #Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 #Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 #Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 #Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
You might like
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
JavaScript实现异步图像上传功能
2018/07/12 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python如何执行系统命令
2020/09/23 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
GWebs公司笔试题
2012/05/04 面试题
公司司机岗位职责
2014/02/07 职场文书
房地产营销策划方案
2014/02/08 职场文书
建筑安全责任书范本
2014/07/24 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Golang中异常处理机制详解
2021/06/08 Golang