基于Vuejs框架实现翻页组件

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

• ...

//前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)
}
}
});