基於vue2.0實現仿百度前端分頁效果（一）

前言

最近在接手一個后台管理項目的時候，由於之前是使用jquery+bootstrap做的，后端使用php yii框架，前后端耦合在一起，所以接手過來之后通過vue進行改造，但依然繼續使用的bootstrap框架，所以需要使用到vue來實現前端的分頁效果。

先看實現效果圖

代碼實現

分析一下，我們想要的效果是什么樣的
1、每頁只顯示10個可見分頁數
2、當點擊到第7頁的時候，左邊顯示從2開始，第一頁不可見，右邊顯示到11頁

對於的算法如下：

left = curPage - pageGroup/2
right = curPage + pageGroup/2 - 1

其實實現也非常簡單，並不難

下面是整個實現分頁的代碼

//html代碼
<ul class="clearfix">
			<li @click="changePage(curPage-1)">上一頁</li>
			<!-- <li @click="changePage(1)">首頁</li> -->
			<li :class="{'active':curPage==item.val}" v-for="item in pagelist" v-text="item.text" @click="changePage(item.val)">1</li>
			<!-- <li @click="changePage(totalPage)">尾頁</li> -->
			<li @click="changePage(curPage+1)">下一頁</li>
		</ul>
		<div style="padding: 20px;">
			{{curPage}}/{{totalPage}}頁
		</div>


//js代碼
var vm = new Vue({
			el: '#app',
			data: {
				msg:'hello',
				curItem:'',
				curPage:1,
				total:211,
				limit:10,
				pageGroup:10//分頁條數 默認7個分頁數
			},
			created: function () {
				console.log('created')
			},
			mounted: function () {
				console.log('mounted')
			},
			computed:{
				totalPage:function(){
					return Math.ceil(this.total / this.limit)
				},
				pagelist:function(){
					var list = [];
					var count = Math.floor(this.pageGroup/2), center = this.curPage;
					var left = 1,right = this.totalPage;

					if(this.totalPage>this.pageGroup){
						if(this.curPage>count+1){
							if(this.curPage < this.totalPage - count){
								left = this.curPage - count;
								right = this.curPage + count-1;
							}else{
								left = this.totalPage - this.pageGroup+1;
							}
						}else{
							right = this.pageGroup;
						}
					}

					// 遍歷添加到數組里
					while(left<=right){
						list.push({
							text:left,
							val:left
						});
						left++;
					}
					return list;
				}
			},
		  methods:{
		  	changePage:function(idx){
		  		if(idx!=this.curPage && idx>0 && idx<=this.totalPage){
		  			this.curPage = idx;
		  		}
		  	},
		  	login:function(){
		  		alert('login')
		  	}
		  }
		})

最后

以上，就是前端分頁效果實現，下篇文章我將把分頁抽離出來做成一個分頁組件，畢竟分頁在很多頁面都需要用到