商城項目-頁面分頁效果

3.頁面分頁效果

剛才的查詢中，我們預設了查詢的頁碼和每頁大小，是以所有的分頁功能都無法使用，接下來我們一起看看

分頁功能條

該如何制作。

這裡要分兩步，

• 第一步：如何生成分頁條
• 第二步：點選分頁按鈕，我們做什麼

3.1.如何生成分頁條

先看下頁面關于分頁部分的代碼：

可以看到所有的分頁欄内容都是寫死的。

3.1.1.需要的資料

分頁資料應該是根據總頁數、目前頁、總條數等資訊來計算得出。

• 目前頁：肯定是由頁面來決定的，點選按鈕會切換到對應的頁
• 總頁數：需要背景傳遞給我們
• 總條數：需要背景傳遞給我們

我們首先在data中記錄下這幾個值：page-目前頁，total-總條數，totalPage-總頁數

data: {
    ly,
    search:{
        key: "",
        page: 1
    },
    goodsList:[], // 接收搜尋得到的結果
    total: 0, // 總條數
    totalPage: 0 // 總頁數
}
           

因為page是搜尋條件之一，是以記錄在search對象中。

要注意：我們在created鈎子函數中，會讀取url路徑的參數，然後指派給search。如果是第一次請求頁面，page是不存在的。是以為了避免page被覆寫，我們應該這麼做：

不過，這個時候我們自己的search對象中的值就可有可無了

3.1.2.背景提供資料

背景傳回的結果中，要包含total和totalPage，我們改造下剛才的接口：

在我們傳回的PageResult對象中，其實是有totalPage字段的：

我們在傳回時，把這個值填上：

頁面測試一下：

OK

3.1.3.頁面計算分頁條

首先，把背景提供的資料儲存在data中：

然後看下我們要實作的效果：

這裡最複雜的是中間的1~5的分頁按鈕，它需要動态變化。

思路分析：

• 最多有5個按鈕，是以我們可以用

  v-for

  循環從1到5即可
• 但是分頁條不一定是從1開始：
  • 如果目前頁值小于等于3的時候，分頁條位置從1開始到5結束
  • 如果總頁數小于等于5的時候，分頁條位置從1開始到5結束
  • 如果目前頁碼大于3，應該從page-3開始
  • 但是如果目前頁碼大于totalPage-3，應該從totalPage-5開始

是以，我們的頁面這樣來做：

a标簽中的分頁數字通過

index

函數來計算，需要把

i

傳遞過去：

index(i){
    if(this.search.page <= 3 || this.totalPage <= 5){
        // 如果目前頁小于等于3或者總頁數小于等于5
        return i;
    } else if(this.search.page > 3) {
        // 如果目前頁大于3
        return this.search.page - 3 + i;
    } else {
        return this.totalPage - 5 + i;
    }
}
           

需要注意的是，如果總頁數不足5頁，我們就不應該周遊15，而是1總頁數，稍作改進：

分頁條的其它部分就比較簡單了：

<div class="sui-pagination pagination-large">
    <ul style="width: 550px">
        <li :class="{prev:true,disabled:search.page === 1}">
            <a href="#">«上一頁</a>
        </li>
        <li :class="{active: index(i) === search.page}" v-for="i in Math.min(5,totalPage)" :key="i">
            <a href="#">{{index(i)}}</a>
        </li>
        <li class="dotted" v-show="totalPage > 5"><span>...</span></li>
        <li :class="{next:true,disabled:search.page === totalPage}">
            <a href="#">下一頁»</a>
        </li>
    </ul>
    <div>
        <span>共{{totalPage}}頁&nbsp;</span>
        <span>
            到第
            <input type="text" class="page-num" :value="search.page">
            頁 <button class="page-confirm" οnclick="alert(1)">确定</button>
        </span>
    </div>
</div>
           

3.2.點選分頁做什麼

點選分頁按鈕後，自然是要修改

page

的值

是以，我們在

上一頁

、

下一頁

按鈕添加點選事件，對page進行修改，在數字按鈕上綁定點選事件，點選直接修改page：

prevPage(){
        if(this.search.page > 1){
            this.search.page--
        }
    },
    nextPage(){
        if(this.search.page < this.totalPage){
            this.search.page++
        }
    }
           

當

page

發生變化，我們應該去背景重新查詢資料。

不過，如果我們直接發起ajax請求，那麼浏覽器的位址欄中是不會有變化的，沒有記錄下分頁資訊。如果使用者重新整理頁面，那麼就會回到第一頁。

這樣不太友好，我們應該把搜尋條件記錄在位址欄的查詢參數中。

是以，我們監聽search的變化，然後把search的過濾字段拼接在url路徑後：

watch:{
    search:{
        deep:true,
            handler(val){
            // 把search對象變成請求參數，拼接在url路徑
            window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(val);
        }
    }
},
           

重新整理頁面測試，然後就出現重大bug：頁面無限重新整理！為什麼？

因為Vue執行個體初始化的鈎子函數中，我們讀取請求參數，指派給search的時候，也觸發了watch監視！也就是說，每次頁面建立完成，都會觸發watch，然後就會去修改window.location路徑，然後頁面被重新整理，再次觸發created鈎子，又觸發watch，周而複始，無限循環。

是以，我們需要在watch中進行監控，如果發現是第一次初始化，則不繼續向下執行。

那麼問題是，如何判斷是不是第一次？

第一次初始化時，search中的key值肯定是空的，是以，我們這麼做：

watch:{
    search:{
        deep:true,
            handler(val,old){
            if(!old || !old.key){
                // 如果舊的search值為空，或者search中的key為空，證明是第一次
                return;
            }
            // 把search對象變成請求參數，拼接在url路徑
            window.location.href = "http://www.leyou.com/search.html?" + ly.stringify(val);
        }
    }
}
           

再次重新整理，OK了！

3.3.頁面頂部分頁條

在頁面商品清單的頂部，也有一個分頁條：