用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实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
js实现坦克大战游戏
Feb 24 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中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python3生成随机数实例
2014/10/20 Python
python编程实现希尔排序
2017/04/13 Python
Python 函数基础知识汇总
2018/03/09 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
高中校园广播稿
2014/01/11 职场文书
初中化学教学反思
2014/01/23 职场文书
2014年班级工作总结
2014/11/14 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers