基于Vuejs框架实现翻页组件

 更新时间:2020年06月29日 09:44:53   作者:lemon678  
这篇文章主要为大家详细介绍了基于VueJs框架的翻页组件,小巧精致,性能优异的MVVM框架实现翻页组件,也适用于angular,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

翻页功能对前端后端都是个难题啊!今天终于给踩了!哈哈!整理下方法,我是基于vueJs写的,同样适用于angular哈!

封装下载地址:vue.js翻页组件  

效果截图:

整体实现逻辑,当用户点击页码时,ajax从后端获取数据,包括:records(当前页查询到的记录),totalRecords: 121(所有记录),currentPage(当前页码),totalPage(总页码),size(当前页显示数量),之后用我封装的算法assemblePageTurnerParams,算出页面展示哪些页码。

不得不说,我考虑的很全面的哈!!页码多的时候显示省略号,页码少的时候,则显示的少!

源码如下:

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
 <title>vue翻页</title>
 <link rel="stylesheet" type="text/css" href="css/pageTurner.css">
</head>
<body class="myApp">
 <div class="wrapper">
 <p class="records">当前展示 {{ pageTurner.records }} 条记录,共{{ pageTurner.totalRecords }} 条记录</p>
 <ul class="page-turner-container clearfix">
 <li v-on:click="queryData(pageTurner.currentPage-1)">«</li>
 <!-- 首页 -->
 <li v-on:click="queryData(1)" :class="pageTurner.currentPage == 1 ? 'current-page' : '' ">1</li>
 <li v-if="pageTurner.currentPage>4 && pageTurner.totalPage>7" class="omit">...</li>
  
 <!-- 展示页 -->
 <li v-for="page in pageTurner.displayPageList" :class="page == pageTurner.currentPage ? 'current-page' : '' " v-on:click="queryData(page)">{{ page }}</li>
  
 <!-- 尾页 -->
 <li v-if="pageTurner.currentPage<pageTurner.totalPage-3 && pageTurner.totalPage>7 " class="omit" >...</li>
 <li v-on:click="queryData(pageTurner.totalPage)" :class="pageTurner.currentPage == pageTurner.totalPage ? 'current-page' : '' " v-if="pageTurner.totalPage != 1 && pageTurner.totalPage>6">{{ pageTurner.totalPage }}</li>
 <li v-on:click="queryData(pageTurner.currentPage+1)">»</li>
 </ul>
 </div>
  
 <script type="text/javascript" src="lib/vue.js"></script>
 <script type="text/javascript" src="pageTurner.js"></script>
</body>
</html>

vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
//ajax返回json
//{"status":true,"msg":"ok","data":{"accidentList":[{"token":"Mw==","accidentStatus":"triggered","endTime":"------------","continueTime":"------------","accidentStatusFriend":"\u5f85\u63a5\u624b","id":"3","enId":"11","currentLevelNum":"0","curDuty":[{"id":"4420","name":"zhaopeng1","type":"member"}],"curPolicyId":"2","createTime":"2016-08-24 15:43:10","description":"{\"level\":1,\"genre\":2,\"from\":\"10.103.11.21\",\"info\":\"XX\u786c\u4ef6Fail\",\"detail\":\"XX\u786c\u4ef6Fail\u53ef\u80fd\u7684\u539f\u56e0\u662fXXX\uff0c\u5efa\u8baeXXX\"}","level":1,"genre":2,"from":"10.103.11.21","info":"XX\u786c\u4ef6Fail","serviceName":"ceshi"},{"token":"Mg==","accidentStatus":"triggered","endTime":"------------","continueTime":"------------","accidentStatusFriend":"\u5f85\u63a5\u624b","id":"2","enId":"10","currentLevelNum":"0","curDuty":[{"id":"4420","name":"zhaopeng1","type":"member"}],"curPolicyId":"2","createTime":"2016-08-24 15:43:07","description":"{\"level\":1,\"genre\":2,\"from\":\"10.103.11.21\",\"info\":\"XX\u786c\u4ef6Fail\",\"detail\":\"XX\u786c\u4ef6Fail\u53ef\u80fd\u7684\u539f\u56e0\u662fXXX\uff0c\u5efa\u8baeXXX\"}","level":1,"genre":2,"from":"10.103.11.21","info":"XX\u786c\u4ef6Fail","serviceName":"ceshi"},{"token":"MQ==","accidentStatus":"triggered","endTime":"------------","continueTime":"------------","accidentStatusFriend":"\u5f85\u63a5\u624b","id":"1","enId":"9","currentLevelNum":"0","curDuty":[{"id":"4420","name":"zhaopeng1","type":"member"}],"curPolicyId":"1","createTime":"2016-08-24 15:31:59","description":"{\"level\":1,\"genre\":2,\"from\":\"10.103.11.21\",\"info\":\"XX\u786c\u4ef6Fail\",\"detail\":\"XX\u786c\u4ef6Fail\u53ef\u80fd\u7684\u539f\u56e0\u662fXXX\uff0c\u5efa\u8baeXXX\"}","level":1,"genre":2,"from":"10.103.11.21","info":"XX\u786c\u4ef6Fail","serviceName":"nimi"}],"pageParams":{"records":"12","totalRecords":"121","currentPage":"2","totalPage":"18","size":12}}}
  
//前4个属性是后台返回的,前端计算displayPageList展示列表
var pageTurnerDefaultParams = {
 records: 9,
 totalRecords: 121,
 currentPage: 1,
 totalPage: 1,
 size: 12,
 displayPageList: [3,4,5,6,7]
};
  
var assemblePageTurnerParams = function(records,totalRecords,currentPage,totalPage,size){
 var records = records;
 var totalRecords = totalRecords;
 var currentPage = currentPage;
 var totalPage = totalPage;
 var size = size;
 var displayPageList = [];
  
 var firstPage = ''
 //第一页时 翻上页
 if(currentPage<1){
 console.log('已经是第一页了!!')
 currentPage = 1
 }
 //最后一个 翻下页
 else if(currentPage>totalPage){
 console.log('已经是最后一页了!!')
 currentPage = totalPage
 }
  
 //总页数小于7页
 if (totalPage<7){
 console.log('总页数小于7页!')
 //console.log('总页数:' + totalPage)
 for (var j=2; j<=totalPage; j++){
 //console.log(j)
 displayPageList.push(j)
 }
 }
 //总页数大于等于7页
 else{
 console.log('总页数大于等于7页!')
 if (currentPage<5){
 console.log('点击的页面小于5')
 firstPage = 2
 }
 // else if (currentPage<6){
 // console.log('点击的页面小于6')
 // firstPage = 3
 // }
 else if(currentPage>totalPage-3){
 console.log('点击的页码大于总页码-3了')
 firstPage = totalPage - 5
 }
 else{
 firstPage = currentPage-2;
 }
  
 for (var i=firstPage; i<firstPage+5; i++){
 displayPageList.push(i)
 }
 }
  
 var params = {
 records: records,
 totalRecords: totalRecords,
 currentPage: currentPage,
 totalPage: totalPage,
 size: size,
 displayPageList: displayPageList
 }
  
 return params
};
  
var pageTurnerController = new Vue({
 el: '.myApp',
 data: {
 pageTurner: pageTurnerDefaultParams
 },
 ready: function() {
 //首次查询时 传递查询第一页和pageSize
 this.queryData(1)
 },
 methods: {
 queryData:function(page){
 //do ajax here
 //从后台获取到records totalRecords totalPage size
 //用assemble方法计算出所有翻页相关的参数
 //assemblePageTurnerParams 的4个参数 records totalRecords page totalPage pageSize
 this.pageTurner = assemblePageTurnerParams(11,121,page,10,12)
 console.log(JSON.stringify(this.pageTurner))
 console.log('跳转到' + this.pageTurner.currentPage)
 }
 }
});

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • vue绑定的点击事件阻止冒泡的实例

    vue绑定的点击事件阻止冒泡的实例

    下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 关于vue-router的那些事儿

    关于vue-router的那些事儿

    要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • Vue请求JSON Server服务器数据的实现方法

    Vue请求JSON Server服务器数据的实现方法

    这篇文章主要介绍了Vue请求JSON Server服务器数据的实现方法,需要的朋友可以参考下
    2018-11-11
  • vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载

    vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载

    这篇文章主要介绍了vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 使用Elemen加上lang=“ts“后编译报错

    使用Elemen加上lang=“ts“后编译报错

    本文主要介绍了使用Elemen加上lang=“ts“后编译报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 关于eslint和prettier格式化冲突问题

    关于eslint和prettier格式化冲突问题

    这篇文章主要介绍了eslint和prettier格式化冲突问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • 离线搭建vue环境运行项目完整步骤

    离线搭建vue环境运行项目完整步骤

    这篇文章主要给大家介绍了关于离线搭建vue环境运行项目的相关资料,文中通过实例代码以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • Vue实现网页转PDF方法流程详解

    Vue实现网页转PDF方法流程详解

    在日常的工作中,有时候会碰到需要将某个网址网页保存成为pdf的情况,这篇文章主要介绍了用Vue实现网页转PDF的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue2如何安装引入Ant Design

    vue2如何安装引入Ant Design

    这篇文章主要介绍了vue2如何安装引入Ant Design问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue-loader教程介绍

    vue-loader教程介绍

    本篇文章主要介绍了vue-loader教程介绍,vue-loader就是告诉webpack如何将vue格式的文件转换成js。有兴趣的可以了解一下
    2017-06-06

最新评论