欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

基于Vuejs框架实现翻页组件

程序员文章站 2022-06-06 12:13:45
翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于vuejs写的，同样适用于angular哈！ 封装下载地址： 效果截图： 整体实现逻...

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

封装下载地址：

效果截图：

基于Vuejs框架实现翻页组件

整体实现逻辑，当用户点击页码时，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组件学习教程进行学习。

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

上一篇： VueJS全面解析

下一篇： 小孩子们的幽默与智慧

推荐阅读