基于Vuejs框架实现翻页组件

站长资源 2024/11/28 佚名

35 1538 35

DDR爱好者之家 Design By 杰米

翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于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 ">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 " 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 " 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="/UploadFiles/2021-04-02/vue.js">

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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue.js,翻页,组件

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“基于Vuejs框架实现翻页组件”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

基于Vuejs框架实现翻页组件

微信端口及协议分析(java、C版)

vue2.0+webpack环境的构造过程

评论“基于Vuejs框架实现翻页组件”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接