基于Vuejs框架实现翻页组件

前端之家收集整理的这篇文章主要介绍了基于Vuejs框架实现翻页组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

封装下载地址:

效果截图:

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

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

源码如下:

html

vue翻页
  • <li v-for="page in pageTurner.displayPageList" :class="page == pageTurner.currentPage ? 'current-page' : '' " v-on:click="queryData(page)">{{ page }}

  • ...

<script type="text/javascript" src="lib/vue.js">
<script type="text/javascript" src="pageTurner.js">

vue

//前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组件的教程,请大家点击专题进行学习。

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

原文链接:https://www.f2er.com/vue/44548.html

猜你在找的Vue相关文章