基于Vuejs框架实现翻页组件
更新时间：2020年06月29日 09:44:53 作者：lemon678
这篇文章主要为大家详细介绍了基于VueJs框架的翻页组件，小巧精致，性能优异的MVVM框架实现翻页组件，也适用于angular，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于vueJs写的，同样适用于angular哈！
封装下载地址：vue.js翻页组件
效果截图：
整体实现逻辑，当用户点击页码时，ajax从后端获取数据，包括：records（当前页查询到的记录），totalRecords: 121（所有记录），currentPage（当前页码），totalPage（总页码），size（当前页显示数量），之后用我封装的算法assemblePageTurnerParams，算出页面展示哪些页码。
不得不说，我考虑的很全面的哈！！页码多的时候显示省略号，页码少的时候，则显示的少！
源码如下：
html
<!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
//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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
ElementUI是一个强大的PC端UI组件框架，它不依赖于vue，但是却是当前和vue配合做项目开发的一个比较好的ui框架，本文主要介绍了如何在vue3中引入使用ElementUI，需要的可以参考一下2023-06-06
这篇文章主要介绍了Vue 实现手动刷新组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要为大家详细介绍了vue3.0+echarts实现立体柱图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-09-09
本文给大家介绍Vue3中使用v-model高级用法参数绑定传值的相关知识,包括单个输入框传值和多个输入框传值,一个组件接受多个v-model值,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了vue-route路由管理的安装与配置,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue3.0中的computed写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
这篇文章主要介绍了详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
vue2更改data里的变量不生效时,深层更改data里的变量问题
这篇文章主要介绍了vue2更改data里的变量不生效时,深层更改data里的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最近在需求中遇到了elementUI合并行,索性给大家整理下,这篇文章主要给大家介绍了关于element-ui表格的合并行和列的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
今天小编就为大家分享 一篇VUE渲染后端返回含有script标签的html字符串示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论