基于Vuejs框架实现翻页组件

2019-11-19 19:00:48

字体：大中小

来源：转载

供稿：网友

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

效果截图：

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

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

上一篇：微信端口及协议分析(java、C版)

下一篇：vue2.0+webpack环境的构造过程