基於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')
            }
          }
        })

最後

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