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 相关文章推荐
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python 使用shutil复制图片的例子
2019/12/13 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
Python调用Windows命令打印文件
2020/02/07 Python
python str字符串转uuid实例
2020/03/03 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
项目合作协议书范本
2014/04/16 职场文书
供货协议书
2014/04/22 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
react 项目中引入图片的几种方式
2021/06/02 Javascript
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers