快捷導(dǎo)航

基于Vuejs框架實(shí)現(xiàn)翻頁(yè)組件

更新時(shí)間：2020年06月29日 09:44:53 作者：lemon678

這篇文章主要為大家詳細(xì)介紹了基于VueJs框架的翻頁(yè)組件，小巧精致，性能優(yōu)異的MVVM框架實(shí)現(xiàn)翻頁(yè)組件，也適用于angular，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

翻頁(yè)功能對(duì)前端后端都是個(gè)難題?。〗裉旖K于給踩了！哈哈！整理下方法，我是基于vueJs寫(xiě)的，同樣適用于angular哈！

封裝下載地址：vue.js翻頁(yè)組件

效果截圖：

整體實(shí)現(xiàn)邏輯，當(dāng)用戶點(diǎn)擊頁(yè)碼時(shí)，ajax從后端獲取數(shù)據(jù)，包括：records（當(dāng)前頁(yè)查詢到的記錄），totalRecords: 121（所有記錄），currentPage（當(dāng)前頁(yè)碼），totalPage（總頁(yè)碼），size（當(dāng)前頁(yè)顯示數(shù)量），之后用我封裝的算法assemblePageTurnerParams，算出頁(yè)面展示哪些頁(yè)碼。

不得不說(shuō)，我考慮的很全面的哈?。№?yè)碼多的時(shí)候顯示省略號(hào)，頁(yè)碼少的時(shí)候，則顯示的少！

源碼如下：

html

<!DOCTYPE html> 
<html> 
<head> 
 <title>vue翻頁(yè)</title> 
 <link rel="stylesheet" type="text/css" href="css/pageTurner.css"> 
</head> 
<body class="myApp"> 
 <div class="wrapper"> 
 <p class="records">當(dāng)前展示 {{ pageTurner.records }} 條記錄，共{{ pageTurner.totalRecords }} 條記錄</p> 
 <ul class="page-turner-container clearfix"> 
 <li v-on:click="queryData(pageTurner.currentPage-1)">«</li> 
 <!-- 首頁(yè) --> 
 <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> 
 
 <!-- 展示頁(yè) --> 
 <li v-for="page in pageTurner.displayPageList" :class="page == pageTurner.currentPage ? 'current-page' : '' " v-on:click="queryData(page)">{{ page }}</li> 
 
 <!-- 尾頁(yè) --> 
 <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個(gè)屬性是后臺(tái)返回的，前端計(jì)算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 = '' 
 //第一頁(yè)時(shí) 翻上頁(yè) 
 if(currentPage<1){ 
 console.log('已經(jīng)是第一頁(yè)了??！') 
 currentPage = 1 
 } 
 //最后一個(gè) 翻下頁(yè) 
 else if(currentPage>totalPage){ 
 console.log('已經(jīng)是最后一頁(yè)了??！') 
 currentPage = totalPage 
 } 
 
 //總頁(yè)數(shù)小于7頁(yè) 
 if (totalPage<7){ 
 console.log('總頁(yè)數(shù)小于7頁(yè)！') 
 //console.log('總頁(yè)數(shù)：' + totalPage) 
 for (var j=2; j<=totalPage; j++){ 
 //console.log(j) 
 displayPageList.push(j) 
 } 
 } 
 //總頁(yè)數(shù)大于等于7頁(yè) 
 else{ 
 console.log('總頁(yè)數(shù)大于等于7頁(yè)！') 
 if (currentPage<5){ 
 console.log('點(diǎn)擊的頁(yè)面小于5') 
 firstPage = 2 
 } 
 // else if (currentPage<6){ 
 // console.log('點(diǎn)擊的頁(yè)面小于6') 
 // firstPage = 3 
 // } 
 else if(currentPage>totalPage-3){ 
 console.log('點(diǎn)擊的頁(yè)碼大于總頁(yè)碼-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() { 
 //首次查詢時(shí) 傳遞查詢第一頁(yè)和pageSize 
 this.queryData(1) 
 }, 
 methods: { 
 queryData:function(page){ 
 //do ajax here 
 //從后臺(tái)獲取到records totalRecords totalPage size 
 //用assemble方法計(jì)算出所有翻頁(yè)相關(guān)的參數(shù) 
 //assemblePageTurnerParams 的4個(gè)參數(shù) records totalRecords page totalPage pageSize 
 this.pageTurner = assemblePageTurnerParams(11,121,page,10,12) 
 console.log(JSON.stringify(this.pageTurner)) 
 console.log('跳轉(zhuǎn)到' + this.pageTurner.currentPage) 
 } 
 } 
});

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: