您好,登錄后才能下訂單哦!
小編給大家分享一下如何利用VUE框架實(shí)現(xiàn)列表分頁功能,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
先來看一下效果圖:
功能描述:
1. 點(diǎn)擊頁面序號(hào)跳轉(zhuǎn)到相應(yīng)頁面;
2. 點(diǎn)擊單左/單右,向后/向前跳轉(zhuǎn)一個(gè)頁面;
3. 點(diǎn)擊雙左/雙右,直接跳轉(zhuǎn)到最后一頁/第一頁;
4. 一次顯示當(dāng)前頁面的前三個(gè)與后三個(gè)頁面;
5. 始終顯示最后一個(gè)頁面;
HTML:
<!-- 分頁開始 --> <div class="u-pages" > <ul> <li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> << </a></li> <li v-if="showPre" class="crt"><a v-on:click="minus(cur)"> < </a></li> <template v-for="index in indexs" > <li class="{{classRenderer(index)}}"> <a v-on:click="btnClick(index)" >{{index}}</a> </li> </template> <li v-if="showMoreTail" class="crt">..</li> <li class="{{classRenderer(pageNo)}}"><a @click="btnClick(pageNo)">{{pageNo}}</a></li> <li v-if="showTail" class="crt"><a v-on:click="plus(cur)">></a></li> <li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">>></a></li> </ul> </div> <!-- 分頁結(jié)束 -->
HTML方法分析:
1、
<li class="{{classRenderer(index)}}">
classRenderer()方法實(shí)現(xiàn)了當(dāng)點(diǎn)擊頁面索引是,點(diǎn)擊頁面獲得選中效果
2、
<a v-on:click="btnClick(index)" >{{index}}</a>
btnClick()方法,實(shí)現(xiàn)了點(diǎn)擊頁面索引,跳轉(zhuǎn)到相應(yīng)頁面
showPre showTail
showPre控制跳轉(zhuǎn)到第一頁與跳轉(zhuǎn)到前一頁的按鈕的顯示與消除
showTail控制跳轉(zhuǎn)到最后一頁與跳轉(zhuǎn)到后一頁的按鈕的顯示與消除
cur
記錄當(dāng)前頁序號(hào)
jumpFirst(cur) minus(cur) plus(cur) jumpTail(cur)
實(shí)現(xiàn)按鈕跳轉(zhuǎn)功能
JS:
module.exports = { data: function () { return { cur:1, showTail:true, showMorePre: false, showMoreTail: false, } }, methods:{ jumpFirst:function(data){ var $this = this; data = 1; $this.cur = data; if (data == 1 ) { $this.$set("showPre", false); }else { $this.$set("showPre", true); } $this.$am.ajax({ url:window.$ApiConf.api_order_detail_list, type:'GET', data:{start: 1}, success: function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) $this.$set("showTail", true); return data; }, minus:function(data){ var $this = this; data--; $this.cur = data; $this.$set("showTail", true); if(data == 1){ $this.$set("showPre", false); }else{ $this.$set("showPre", true); } $this.$am.ajax({ url:window.$ApiConf.api_order_detail_list, type:'GET', data:{start: 1 + $this.limit * (data-1) }, success:function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) return data; }, plus: function(data){ var $this = this; data++; $this.cur = data; $this.$set("showPre", true); if (data == $this.pageNo) { $this.$set("showTail", false); }else { $this.$set("showTail", true); } $this.$am.ajax({ url:/* 這里寫上你自己請(qǐng)求數(shù)據(jù)的路徑 */, type:'GET', data:{start: 1 + $this.limit * (data-1) }, success:function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) return data; }, classRenderer:function(index){ var $this = this; var cur = $this.cur; if(index != cur){ return 'crt'; } return ''; }, btnClick:function(data){ var $this = this; if(data == 1){ $this.$set("showPre", false); }else{ $this.$set("showPre", true); } if (data == $this.pageNo) { $this.$set("showTail", false); }else { $this.$set("showTail", true); } if (data != $this.cur) { $this.cur = data; $this.$am.ajax({ url:window.$ApiConf.api_order_detail_list, type:'GET', data:{start: 1 + $this.limit * (data-1) }, success:function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) } }, jumpTail:function(data){ var $this = this; data = $this.pageNo; $this.cur = data; if (data == $this.pageNo) { $this.$set("showTail", false); }else { $this.$set("showTail", true); } $this.$am.ajax({ url:window.$ApiConf.api_order_detail_list, type:'GET', data:{start: 1 + $this.limit * (data-1) }, success:function(data){ console.log(data); $this.$set("records", data.record.records); $this.$set("start", data.record.query.start); $this.$set("total", data.record.query.total); $this.$set("limit", data.record.query.limit); } }) $this.$set("showPre", true); return data; }, computed: { //*********************分頁開始******************************// indexs: function(){ var $this = this; var ar = []; if ($this.cur > 3) { ar.push($this.cur - 3); ar.push($this.cur - 2); ar.push($this.cur - 1); }else { for (var i = 1; i < $this.cur; i++) { ar.push(i); } } if ($this.cur != $this.pageNo) { ar.push($this.cur); } if ( $this.cur < ( $this.pageNo - 3 ) ) { ar.push($this.cur + 1); ar.push($this.cur + 2); ar.push($this.cur + 3); if ( $this.cur < ( $this.pageNo - 4 ) ) { $this.$set("showMoreTail", true); } }else { $this.$set("showMoreTail", false); for (var i = ($this.cur + 1); i < $this.pageNo; i++) { ar.push(i); } } return ar; } //*********************分頁結(jié)束******************************// } }
看完了這篇文章,相信你對(duì)“如何利用VUE框架實(shí)現(xiàn)列表分頁功能”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。