vue实现分页栏效果-创新互联

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

当我们在获取后台数据时，特别是获取大量的列表数据时，页面内能展示的数据不能过多，不然让用户看起来很疲惫，体验度不高。这个时候就需要分页栏来实现指定的数据显示在页面上，然后用户点击指定页面或者点击上一页、下一页再或者输入指定的数据跳转到指定的页面数据的功能都能实现，所以分页栏的设计与实现是十分有必要的。

下面来详细介绍下分页栏设计的步骤与实现。

1.设计的前提条件：

必须成功获取到后台数据，而且获取到的数据类型是一个数组，我们暂且用res.data.musicLists表示后台返回的数据。

另外如果后台开发师专业的话，他会把显示数据的总个数，当前页，每页有多少条，总页数也一起返回回来，我们暂且用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
 }
 }
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。