用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 处理URL实用技巧
Nov 23 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
JavaScript实现图片放大预览效果
Nov 02 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
PHP 彩色文字实现代码
2009/06/29 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python设置环境变量的原因和方法
2019/06/24 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python3运算符常见用法分析
2020/02/14 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
linux下进程间通信的方式
2013/01/23 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
播音主持女孩的自我评价分享
2013/11/20 职场文书
创新型城市实施方案
2014/03/06 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
优秀团员个人总结
2015/02/26 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
小学生节约用水倡议书
2019/08/12 职场文书