vue实现分页栏效果

本文的例子分享了vue实现分页栏效果的具体代码，供大家参考。具体内容如下

我们在获取后台数据的时候，尤其是获取大量列表数据的时候，不能在页面上显示太多数据，否则用户会看起来很累，体验不高。这时需要分页栏在页面上显示指定的数据，然后用户可以点击指定的页面或者点击上一页或者下一页或者输入指定的数据跳转到指定的页面数据，所以分页栏的设计和实现是非常必要的。

下面详细介绍下一个页面栏的设计步骤和实现。

1.设计的先决条件：

后台数据一定要采集成功，采集的数据类型是数组，所以我们暂时用res.data.musicLists来表示后台返回的数据。

此外，如果后台开发人员是专业的，他会将显示的数据总数、当前页面、每页的页数以及总页数一起返回。我们将暂时使用res.data.paging来表示后台返回的这些字段的值。

下面我发布了可视化表示的代码：

{ data : { list :[{ user _ id :1，昵称：' csdn1 '，sex33600，desc: '帅哥' }，{user _ id33602，昵称：' csdn2 '，sex:0。{user _ id:3，昵称：' csdn3 '，性别：1，desc :' beauty'}，】，pageinfo 3360 {totaltem 336044，totalpage 33603，perpage336015，curpage33601。

//get请求获取用户数据函数getrequest func : function(formdata，request URL){ var=this；$.get(requestUrl，//请求数据路径，即接口formData，//请求数据参数，除了必要的参数之外，还有非必要的参数页面，用来获取当前页面的数据列表。例如，当page=10时，第10页的数据以res={that。person list=RES . data . list；//用户数据列表，即. page info=RES . data . page info；//这些数据包括：当前页面、总页数、当前页数等。那个。cur page=RES . data . paging . cur page；//当前页面即. total page=RES . data . paging . total page；//总页数//用于处理和显示分页栏信息that . handlepagebar(that . total page)})；}，如此直观，我只想显示这种分页栏，它具有“上一页”、“下一页”、“第一页”、“最后一页”、“前十页”和“后十页”的功能，输入指定的数字后跳转到特定的页面。下图：

2.完成了分页栏的设计，实现了交互逻辑。

因为我们每页需要显示15条数据，超过150条数据后，分页列最多显示10个子页列。如果想知道其他数据，可以点击省略号加载下十页的内容，也可以输入指定的数字进行跳转，这样就可以实现了。

看看代码：

//处理分页栏handlePageBar:函数(页码){ var=this如果(那个。寻呼机==' ' | |那个。pager==null){ var pager=[]；if(page num 10){ for(var I=1；i 11I){页面arr。推(我)；} } else { for(var I=1；我第一页；我){第一页。推(我)；} } that . PageArr=PageArr } else if(that。页面截图。长度10){那个。页面arr=页面arr；} else { if((that。第9页。第1页){那个。handlenext extremepage(页码)；} else if((即。page arr)[0]==parsent(即。1){那个。handlepreextremepage(页码)；} } }, //处理点击尾数为0跳转到下一页面时的分页栏显示handleNextExtremePage:函数(页码){ var=thisthat . AddNum=10 var page arr=[]；if(pageNum那。addNum那。addNum 10){ for(var i=那。AddNum 1；我第一页；我){第一页。推(我)；} } else { var page arr=[]；对于(var I=那个。AddNum 1；一. addnum 11我){第一页。推(我)；} } that.pageArr=pageArr}，//处理点击尾数为一跳转到上一页面时的分页栏显示handlePreExtremePage:函数(页码){ var=this那个。AddNum-=10；var page arr=[]；如果(那个。AddNum=0){ for(var I=那个。AddNum=1；一. addnum 11我){第一页。推(我)；} }那个. pageArr=pageArr}，HTML代码：

div class='contentBottom' span共{{pageInfo.totalItem}}条，共{{pageInfo.totalPage}}页，当前页{{personLists.length}}条/span span class=' index page ' @ click=' GoToIndex page '首页/span span class=' prePage ' @ click=' GoToPrepage '/span span class=' Preten ' v-show=' page arr[0]10？true : false' @click='preTen './span class='已知页面' : class=' { ' addBgClass ' : index==CurPage } ' v-for=' page arr中的index ' @ click=' Present Page ' : data-CurPage=' index ' { index } }/span class=' next ten ' v-show=' Page arr。长度10？false : true' @click='nextTen './span span class='下一页' @单击=' GoToNextPage '/span span class=' LastPage ' @单击=' GoToRestPage '尾页/span输入类型=' text ' class=' input page ' ref=' input page ' v-show='总页数10？true : false/span class=' jump to put page ' @ click=' jump to put page ' v-show='第10页合计？'真：假'跳转/span/divCSS代码：

.内容底部{宽度： 98%；高度： 30px线高： 30px文本对齐：右侧；边距-top : 50px；划水： 0.1%;font-size : 14px} .准备好知道页面，页面.下一页。下一个，下一个preTen .索引页.最后一页.跳转到页面{宽度： 30pxdisplay:内联块；文本对齐：中心；border: 1px固体# CCCcursor:指针；} .索引页.最后一页jumptoputpage { font-size : 14px；padding: 0 8px }。inputPage { width: 36px高： 27.5 px垂直对齐： 顶部；} .索引页.输入页面{左边距： 10px} .准备：悬停。已知页面：悬停。下一页：悬停。pretn : Hover。下十架：悬停。最后一页：悬停。跳转到页面：悬停{背景： rgba(230，230，230，1) } .addBgClass { background : rgba(230，230，230，1)；}用户交互逻辑代码：

//显示后十页。只有在页大于10时这个扩充按钮才会显示nextTen:函数(){ var=thisvar pageNum=that.totalPagethat。handlenext extremepage(页码)；}, //显示前十页preTen:函数(){ var=thisvar pageNum=that.totalPagethat。handlepreextremepage(页码)；}, //拉取指定页的码库数据约会页面：函数{ var page=e . target。数据集。弯曲页面；this.curPage=pagevar表单数据={ user _ id : this。用户id，昵称：这个。昵称，页：页}；这个。getrequest func(formData)；}, //拉取上一页码库数据goToPrePage:函数(){ var=this那个。CurPage=ParSeint(即。cur page)-1；如果(那个。第一页。弯曲页面=那个。第1页；//下面用的是一个模态框，可不写var promptText='这已经是第一页了!'；那个。callpromptbox(PromptText)} else { var form data={ user _ id : this。用户id，昵称：这个。昵称，第：页。cur page }；那个。getrequest func(formData)；} }, //拉取下一页码库数据goToNextPage:函数(){ var=this那个。CurPage=ParSeint(即。cur page)1；如果(那个。CurPage那个。TotalPage){那个。CurPage=那个。cur page-1；var promptText='这已经是最后一页了!'；那个。callpromptbox(PromptText)} else { var form data={ user _ id : this。用户id，昵称：这个。昵称，第：页。cur page }；那个。getrequest func(formData)；} }, //直接跳转到首页，即第一页goToIndexPage:函数(){ var=this如果(那个。CurPage==1){ var promptText='这已经是第一页了!'；那个。callpromptbox(PromptText)} else { that。cur page=1；var formData={ user _ id : this。用户id，昵称：这个。昵称，第：页。cur page }；那个。getrequest func(formData)；} }, //直接跳转到尾页goToLastPage:函数(){ var=this如果(那个。CurPage==那个。TotalPage){ var promptText='这已经是最后一页了!'；那个。callpromptbox(PromptText)} else { that。curpage=那个。总页数；var formData={ user _ id : this。用户id，昵称：这个。昵称，第：页。cur page }；那个。getrequest func(formData)；} }, 好了，做完了，大家可复制代码去查看效果，数据可以自己写死，然后去测试。

当然了，我的代码肯定有瑕疵，所以大家在测试的时候，自己觉得有优化的地方可以去尝试优化下，让代码更精简，鲁棒性更强。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。