快捷導(dǎo)航

vue實現(xiàn)分頁欄效果

更新時間：2019年06月28日 14:56:17 作者：Charles_Tian

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分頁欄效果，分頁欄設(shè)計的步驟與實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)分頁欄效果的具體代碼，供大家參考，具體內(nèi)容如下

當(dāng)我們在獲取后臺數(shù)據(jù)時，特別是獲取大量的列表數(shù)據(jù)時，頁面內(nèi)能展示的數(shù)據(jù)不能過多，不然讓用戶看起來很疲憊，體驗度不高。這個時候就需要分頁欄來實現(xiàn)指定的數(shù)據(jù)顯示在頁面上，然后用戶點擊指定頁面或者點擊上一頁、下一頁再或者輸入指定的數(shù)據(jù)跳轉(zhuǎn)到指定的頁面數(shù)據(jù)的功能都能實現(xiàn)，所以分頁欄的設(shè)計與實現(xiàn)是十分有必要的。

下面來詳細(xì)介紹下分頁欄設(shè)計的步驟與實現(xiàn)。

1.設(shè)計的前提條件：

必須成功獲取到后臺數(shù)據(jù)，而且獲取到的數(shù)據(jù)類型是一個數(shù)組，我們暫且用res.data.musicLists表示后臺返回的數(shù)據(jù)。

另外如果后臺開發(fā)師專業(yè)的話，他會把顯示數(shù)據(jù)的總個數(shù)，當(dāng)前頁，每頁有多少條，總頁數(shù)也一起返回回來，我們暫且用res.data.paging來表示后臺返回的這些字段的值。

下面我貼出代碼來直觀表示：

{
 data:{
 list:[
 {user_id:1,nickName:'csdn1',sex:0,desc:'帥哥'},
 {user_id:2,nickName:'csdn2',sex:0,desc:'帥哥'},
 {user_id:3,nickName:'csdn3',sex:1,desc:'美女'},
 ...
 ],
 pageInfo:{
 totalItem:44,
 totalPage:3,
 perPage:15,
 curPage:1
 }
 }
}

然后是將后臺返回的數(shù)據(jù)進(jìn)行處理，如下代碼所示：

 // get請求獲取用戶數(shù)據(jù)函數(shù)
 getRequestFunc: function(formData, requestUrl){
 var that = this;
 $.get(
 requestUrl,//請求數(shù)據(jù)路徑，即接口
 formData,//請求數(shù)據(jù)參數(shù)，除了必需的參數(shù)，還有page這個非必須的參數(shù)，它的作用是獲取當(dāng)前頁的數(shù)據(jù)列表。例如：page=10時，獲取的是第十頁的數(shù)據(jù)
 res => {
 that.personLists = res.data.list;//用戶數(shù)據(jù)列表
 that.pageInfo = res.data.pageInfo;//這個數(shù)據(jù)里面包括：當(dāng)前頁、總頁數(shù)、當(dāng)前頁數(shù)目等
 that.curPage = res.data.paging.curPage;//當(dāng)前頁
 that.totalPage = res.data.paging.totalPage;//總頁數(shù)
 //用于處理顯示分頁欄信息
 that.handlePageBar(that.totalPage) 
 });
 },

那么直觀一點，我就是要顯示這種分頁欄，有“上一頁”、“下一頁”、“首頁”、“尾頁”、“前十頁”、“后十頁”和輸入指定數(shù)字后跳轉(zhuǎn)到具體第幾頁功能。如下圖：

2.分頁欄的設(shè)計已完成，那么接下來實現(xiàn)交互邏輯。

因為我們每頁要顯示15條數(shù)據(jù)，在超過150條數(shù)據(jù)后，分頁欄最多顯示10個子頁欄，要想獲知另外的數(shù)據(jù)，要么點擊省略號加載下十頁的內(nèi)容，要么輸入指定數(shù)字跳轉(zhuǎn)，因此可以這樣實現(xiàn)。

看代碼：

// 處理分頁欄
 handlePageBar: function(pageNum){
 var that = this;
 if(that.pageArr == '' || that.pageArr == null){
 var pageArr = [];
 if(pageNum > 10){
 for(var i = 1; i < 11; i++){
 pageArr.push(i);
 }
 }else{
 for(var i = 1; i < pageNum + 1; i++){
 pageArr.push(i);
 }
 }
 that.pageArr = pageArr;
 }else if(that.pageArr.length < 10){
 that.pageArr = pageArr;
 }else{
 if((that.pageArr)[9] == that.page-1){
 that.handleNextExtremePage(pageNum);
 }else if((that.pageArr)[0] == parseInt(that.page)+1){
 that.handlePreExtremePage(pageNum);
 }
 }
 },
 
 // 處理點擊尾數(shù)為0跳轉(zhuǎn)到下一頁面時的分頁欄顯示
 handleNextExtremePage: function(pageNum){
 var that = this;
 that.addNum += 10;
 var pageArr = [];
 if(pageNum > that.addNum && pageNum < that.addNum+10){
 for(var i = that.addNum + 1; i < pageNum + 1; i++){
 pageArr.push(i);
 }
 }else{
 var pageArr = [];
 for(var i = that.addNum + 1; i < that.addNum + 11; i++){
 pageArr.push(i);
 }
 }
 that.pageArr = pageArr;
 },
 
 // 處理點擊尾數(shù)為1跳轉(zhuǎn)到上一頁面時的分頁欄顯示
 handlePreExtremePage: function(pageNum){
 var that = this;
 that.addNum -= 10;
 var pageArr = [];
 if(that.addNum >= 0){
 for(var i = that.addNum + 1; i < that.addNum + 11; i++){
 pageArr.push(i);
 }
 }
 that.pageArr = pageArr;
 },

HTML代碼：

<div class="contentBottom">
 <span>共{{pageInfo.totalItem}}條，共{{pageInfo.totalPage}}頁，當(dāng)前頁{{personLists.length}}條</span>
 <span class="indexPage" @click="goToIndexPage">首頁</span>
 <span class="prePage" @click="goToPrePage">&lt;</span>
 <span class="preTen" v-show="pageArr[0] > 10 ? true : false" @click="preTen">...</span>
 <span class="knownPage" :class="{'addBgClass': index == curPage}" v-for="index in pageArr" @click="appointPage" :data-curPage="index">{{index}}</span>
 <span class="nextTen" v-show="pageArr.length < 10 ? false : true" @click="nextTen">...</span>
 <span class="nextPage" @click="goToNextPage">></span>
 <span class="lastPage" @click="goToLastPage">尾頁</span>
 <input type="text" class="inputPage" ref="inputPage" v-show="totalPage > 10 ? true : false" />
 <span class="jumpToInputPage" @click="jumpToInputPage" v-show="totalPage > 10 ? true : false">跳轉(zhuǎn)</span>
</div>

CSS代碼：

.contentBottom{
 width: 98%;
 height: 30px;
 line-height: 30px;
 text-align: right;
 margin-top: 50px;
 padding: 0 1%;
 font-size: 14px;
 }
 
 .prePage,.knownPage,.nextPage,.nextTen,.preTen,.indexPage,.lastPage,.jumpToInputPage{
 width: 30px;
 display: inline-block;
 text-align: center;
 border: 1px solid #CCC;
 cursor: pointer;
 }
 
 .indexPage,.lastPage,.jumpToInputPage{
 font-size: 14px;
 padding: 0 8px;
 }
 
 .inputPage{
 width: 36px;
 height: 27.5px;
 vertical-align: top;
 }
 
 .indexPage,.inputPage{
 margin-left: 10px;
 }
 
 .prePage:hover,.knownPage:hover,.nextPage:hover,.preTen:hover,.nextTen:hover,.indexPage:hover,.lastPage:hover,.jumpToInputPage:hover{
 background: rgba(230,230,230,1)
 }
 
 .addBgClass{
 background: rgba(230,230,230,1);
 }

用戶交互邏輯代碼：

// 顯示后十頁。只有在page大于10時這個擴(kuò)充按鈕才會顯示
 nextTen: function(){
 var that = this;
 var pageNum = that.totalPage;
 that.handleNextExtremePage(pageNum);
 },
 
 // 顯示前十頁
 preTen: function(){
 var that = this;
 var pageNum = that.totalPage;
 that.handlePreExtremePage(pageNum);
 },
 
 // 拉取指定頁的碼庫數(shù)據(jù)
 appointPage: function(e){
 var page = e.target.dataset.curPage;
 this.curPage = page;
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: page
 };
 this.getRequestFunc(formData);
 },
 
 // 拉取上一頁碼庫數(shù)據(jù)
 goToPrePage: function(){
 var that = this;
 that.curPage = parseInt(that.curPage) - 1;
 if(that.curPage < 1){
 that.curPage = that.curPage + 1;
 //下面用的是一個模態(tài)框，可不寫
 var promptText = '這已經(jīng)是第一頁了！';
 that.callPromptBox(promptText)
 }else{
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },
 
 // 拉取下一頁碼庫數(shù)據(jù)
 goToNextPage: function(){
 var that = this;
 that.curPage = parseInt(that.curPage ) + 1;
 if(that.curPage > that.totalPage){
 that.curPage = that.curPage - 1;
 var promptText = '這已經(jīng)是最后一頁了！';
 that.callPromptBox(promptText)
 }else{
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },
 
 // 直接跳轉(zhuǎn)到首頁，即第一頁
 goToIndexPage: function(){
 var that = this;
 if(that.curPage== 1){
 var promptText = '這已經(jīng)是第一頁了！';
 that.callPromptBox(promptText)
 }else{
 that.curPage= 1;
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },
 
 // 直接跳轉(zhuǎn)到尾頁
 goToLastPage: function(){
 var that = this;
 if(that.curPage== that.totalPage){
 var promptText = '這已經(jīng)是最后一頁了！';
 that.callPromptBox(promptText)
 }else{
 that.curPage= that.totalPage;
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },

好了，做完了，大家可復(fù)制代碼去查看效果，數(shù)據(jù)可以自己寫死，然后去測試。

當(dāng)然了，我的代碼肯定有瑕疵，所以大家在測試的時候，自己覺得有優(yōu)化的地方可以去嘗試優(yōu)化下，讓代碼更精簡，魯棒性更強(qiáng)。

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

您可能感興趣的文章: