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 相关文章推荐
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
js尾调用优化的实现
May 23 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 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用户指南-cookies部分
2006/10/09 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
Python数据类型学习笔记
2016/01/13 Python
python中class的定义及使用教程
2019/09/18 Python
Python FFT合成波形的实例
2019/12/04 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
企业宣传方案
2014/03/04 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
结婚堵门保证书
2015/05/08 职场文书
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL
CSS的calc函数用法小结
2022/06/25 HTML / CSS