小編給大家分享一下如何利用VUE框架實現列表分頁功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
先來看一下效果圖：
功能描述：
1. 點擊頁面序號跳轉到相應頁面；
2. 點擊單左/單右，向后/向前跳轉一個頁面；
3. 點擊雙左/雙右，直接跳轉到最后一頁/第一頁；
4. 一次顯示當前頁面的前三個與后三個頁面；
5. 始終顯示最后一個頁面；
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>
<!-- 分頁結束 -->HTML方法分析：
1、
<li class="{{classRenderer(index)}}">classRenderer()方法實現了當點擊頁面索引是，點擊頁面獲得選中效果
2、
<a v-on:click="btnClick(index)" >{{index}}</a>btnClick()方法，實現了點擊頁面索引，跳轉到相應頁面
showPre showTail
showPre控制跳轉到第一頁與跳轉到前一頁的按鈕的顯示與消除
showTail控制跳轉到最后一頁與跳轉到后一頁的按鈕的顯示與消除
cur
記錄當前頁序號
jumpFirst(cur) minus(cur) plus(cur) jumpTail(cur)
實現按鈕跳轉功能
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:/* 這里寫上你自己請求數據的路徑 */,
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;
}
//*********************分頁結束******************************//
}
}看完了這篇文章，相信你對“如何利用VUE框架實現列表分頁功能”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
