快捷導(dǎo)航

vue實(shí)現(xiàn)分頁(yè)欄效果

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

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

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

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

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

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

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

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

下面我貼出代碼來(lái)直觀表示：

{
 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
 }
 }
}

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

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

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

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

因?yàn)槲覀兠宽?yè)要顯示15條數(shù)據(jù)，在超過(guò)150條數(shù)據(jù)后，分頁(yè)欄最多顯示10個(gè)子頁(yè)欄，要想獲知另外的數(shù)據(jù)，要么點(diǎn)擊省略號(hào)加載下十頁(yè)的內(nèi)容，要么輸入指定數(shù)字跳轉(zhuǎn)，因此可以這樣實(shí)現(xiàn)。

看代碼：

// 處理分頁(yè)欄
 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);
 }
 }
 },
 
 // 處理點(diǎn)擊尾數(shù)為0跳轉(zhuǎn)到下一頁(yè)面時(shí)的分頁(yè)欄顯示
 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;
 },
 
 // 處理點(diǎn)擊尾數(shù)為1跳轉(zhuǎn)到上一頁(yè)面時(shí)的分頁(yè)欄顯示
 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}}頁(yè)，當(dāng)前頁(yè){{personLists.length}}條</span>
 <span class="indexPage" @click="goToIndexPage">首頁(yè)</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">尾頁(yè)</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);
 }

用戶交互邏輯代碼：

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

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

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

您可能感興趣的文章: