vuephp分页技巧_web项目中基于Vue实现的数据分页组件｜给你代码

阐明一下上图的导航事情事理：我们将分页导航分为5部分，从左到右依次为：前向、左中、当前、右中、后向。

左中和右中部分会随着当前页码的变革而呈现不同的展示办法，但它们两者逻辑是相同的，紧张是边界的剖断。
以左中为例：当前向和当前之间的页码数不多于三个时，完备显示中间的所有页码，如下图：

当前向和当前之间的页码数多于三个时，左中第一个页码用…代替，表示前向和左中部分有更多未展开页码。

前向和后向的展示就比较大略了：两者的上页"<"和下页">"标识会永久展示，前向部分的页码1只有当当前页码不是1时才展示；后向部分的总数页码只有当当前页码不是总页码时才展示。

组件原型

<app-pagination :total="200" :size="10"></app-pagination>

我们为分页组件命名为app-pagination，接管两个参数：total和size，分别对应于序言所述的数据总数和每页展示数据数。
注册为vue的组件：

Vue.component('app-pagination', { props: { total: {type: Number}, size: {type: Number} }, data() { return { total: this.total, size: this.size }; }, template: ` <ul v-if="pages > 1" class="pagination"> <li><a @click="navigate(current-1 < 1 ? 1 : current-1)"><</a></li> <li v-if="current != 1"><a @click="navigate(1)">1</a></li> <li v-for="p in prevs"> <a v-if="'...' != p" @click="navigate(p)">{{p}}</a> <span v-else>{{p}}</span> </li> <li class="active">{{current}}</li> <li v-for="p in nexts"> <a v-if="'...' != p" @click="navigate(p)">{{p}}</a> <span v-else>{{p}}</span> </li> <li v-if="current != pages"><a @click="navigate(pages)">{{pages}}</a></li> <li><a @click="navigate(current+1 > pages ? pages : current+1)">></a></li> </ul>`})

在template部分，我们对组件模板进行了分段判断和定义，涉及到须要实现的参数和方法如下：pages、current、prevs、nexts、navigate。

pages表示当前数据可分页总数，我们在组件中增加一段computed配置，增加pages获取方法：

...computed: { pages() { return Math.ceil(this.total/this.size); }},...获取current参数

current参数也即当前页码，为了从设计上最简化和目前大多数传参命名习气，我们默认浏览器中的参数page即为当前页码，以这个url为例：http://example.com/news?category=1&page=2，我们须要从中提取出page参数，我们在methods部分定义一个获取页码参数的方法param：

methods: {param(name = null) { let url = location.href.split('?'); let params = []; if(url && url[1]) { let p = url[1].split('&'); for(let i = 0; i < p.length;i++) { let kv = p[i].split('='); params[kv[0]] = kv[1]; } } return name ? params[name] : params; }},

在computed中增加current方法：

current() { let page = parseInt(this.param('page')); return page > 1 ? page : 1;},prevs和nexts的实现

在computed中增加prevs和nexts方法，两者均须要处理好边界问题，担保不越界，并在超出部分用…替代：

prevs() { let data = []; for(let i = 2; i >= 1; i--) { if(this.current - i > 1) data.push(this.current - i); } if(data[0] && data[0] > 1) { if(data[0] - 1 > 2) data.unshift('...'); else if(data[0] - 1 > 1) data.unshift(data[0] - 1); } return data;},nexts() { let data = []; for(let i = 2; i >= 1; i--) { if(this.current + i < this.pages) data.push(this.current + i); } if(data[0] && data[0] < this.pages) { if(data[0] + 1 < this.pages) data.unshift('...'); } return data.reverse();}事宜navigate的处理

在methods中增加如下方法：

navigate(page) { let params = this.param(), query = ''; params['page'] = page; Object.keys(params).forEach(k => query += k+'='+encodeURIComponent(params[k])+'&'); location.href = location.href.split('?')[0] + '?' + query.slice(0, -1);}

这样担保当相应的页码被点击后，动态修合法前url中的page参数，刷新页面。

.pagination li{display:inline-block;padding:5px;}.pagination li a{color:gray;}.pagination li.active{color:#32d296;}

给你代码往期回顾：

给你代码：chrome插件心得

给你代码：阿里云短信验证码登录开拓集成

给你代码：PHP7中的非常与缺点处理