Vue实现web分页组件详解


Posted in Javascript onNovember 28, 2017

本文实例为大家分享了Vue实现web分页组件的具体代码,供大家参考,具体内容如下

效果演示

Vue实现web分页组件详解

源代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>测试分页 - www.maoyupeng.com</title>
 <style type="text/css">
  body{padding:0; margin: 0; broder:none; } #app {width: 500px; height: 200px; margin: 0 auto; text-align: center; background-color: #cccccc; } #mylink {color: #efefef; } .pagination{list-style: none; text-align: center; height: 50px; padding-top: 50px; } .pagination > li {float: left; margin: 0 5px; } [v-cloak] {display: none; } </style>
</head>
<body>
 <div id="app" v-cloak>
  <ul class="pagination">
   <li>
    <a v-if="currentPage == 1" >首页</a>
    <a v-else href="javascript:;" @click="next(1)">首页</a>
   </li>
   <li v-if="currentPage<=1"><a>上一页</a></li>
   <li v-else><a href="javascript:;" @click="next(currentPage-1)">上一页</a></li>


   <li v-for="item in pagingList">
    <a v-if="currentPage==item.key || sign ==item.key" >{{item.key}}</a>
    <a v-else href="javascript:;" @click="next(item.value)">{{item.key}}</a>
   </li>

   <li v-if="currentPage>=totalPageCount"><a>下一页</a></li>
   <li v-else><a href="javascript:;" @click="next(currentPage+1)">下一页</a></li>
   <li>
    <a v-if="totalPageCount == currentPage">尾页</a>
    <a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>
   </li>
  </ul>
  <p>共:{{totalPageCount||0}}页,当前页为第{{currentPage||0}}页   设置总页数:<input style="width:20px;" v-model="totalPageCount"></p>
  <a href="http://www.maoyupeng.com/web-pagination-component-for-vue.html" target="_blank" id="mylink">http://www.maoyupeng.com 带注解版本</a>
 </div>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script type="text/javascript">
  var app = new Vue({
   el: '#app',
   data: {
   // 省略的符号
   sign:'...',
   // 省略号位置
   signIndex:4,
   // 总页数
   totalPageCount: 4,
   // 当前页
   currentPage:1,
   // 显示在页面的数组列表
   pagingList:[]
   },
   watch: {
   totalPageCount (val) {
    var that = this
    if (!val || val == '') return;
    that.currentPage = 1;
    that.init()
   },
   currentPage (val) {
    var that = this
    that.init()
   }
   },
   methods: {
   // 跳转到某页码
   next (num) {
    var that = this
    if (num <= 1) that.currentPage = 1;
    else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
    else that.currentPage = num;
   },
   // 初始化数据
   fetchData () {
    var that = this

    that.pagingList = [];
    var tmp = null;


    if ((that.totalPageCount) > 6) {
     if (((that.totalPageCount-1) == (that.totalPageCount - that.currentPage)) && (that.totalPageCount - that.currentPage) > 5) {
      for (var i=1;i<7;i++) {
       if (i < that.signIndex) {
        tmp = {key:i, value:i }
       } else if (i== that.signIndex) {
        tmp = {key:that.sign, value:0 }
       } else if (i == (that.signIndex + 1) ) {
        tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
       } else {
        tmp = {key:that.totalPageCount, value:that.totalPageCount }
       }
       that.pagingList.push(tmp)
      }
     } else if (((that.totalPageCount - that.currentPage) <= that.signIndex)){
      var starNum = that.totalPageCount - 5;
      for (var i=starNum;i<starNum+6;i++) {
       tmp = {key:i, value:i }
       that.pagingList.push(tmp)
      }
     } else {
      var starNum = that.currentPage - 1;
      for (var i=1;i<7;i++) {
       if (i < that.signIndex) {
        tmp = {key:(starNum - 1) + i, value:(starNum - 1) + i }
       } else if (i== that.signIndex) {
        tmp = {key:that.sign, value:0 }
       } else if (i == (that.signIndex + 1) ) {
        tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
       } else {
        tmp = {key:that.totalPageCount, value:that.totalPageCount }
       }
       that.pagingList.push(tmp)
      }
     }
    } else {
     for (var i =0; i <that.totalPageCount; i++) {
      tmp = {key:i+1, value:i+1 }
      that.pagingList.push(tmp)
     }
    }
   },
   init () {
    var that = this

    that.fetchData()
   }
   },
   mounted () {
   var that = this

   that.init()
   }
  }) 
 </script>
</body>
</html>

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

Javascript 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
基于vue2实现左滑删除功能
Nov 28 #Javascript
JavaScript生成简单等差数列
Nov 28 #Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 #Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 #Javascript
浅谈vue中慎用style的scoped属性
Nov 28 #Javascript
元素全屏的设置与监听实例
Nov 28 #Javascript
vue2实现数据请求显示loading图
Nov 28 #Javascript
You might like
php array的学习笔记
2012/05/10 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
webpack3之loader全解析
2017/10/26 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
Python二分查找详解
2015/09/13 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
优秀班集体获奖感言
2014/02/03 职场文书
广告词串烧
2014/03/19 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
好人好事演讲稿
2014/09/01 职场文书
导游词格式
2015/02/13 职场文书
小学生暑假安全公约
2015/07/14 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python