這里將實現(xiàn)商品列表頁的分頁,必不可少的一步是要學會分析現(xiàn)有網(wǎng)頁的分頁規(guī)則,并且學會利用現(xiàn)有網(wǎng)頁的元素節(jié)省時間,話不多說,讓我們來實現(xiàn)商品的分頁顯示,讓越來越多的商品數(shù)據(jù)整齊排列吧

效果圖.gif

0.語法注意點

如果要遍歷切片,創(chuàng)建切片的時候必須指點切片的長度否則會報錯

image.png

1.新知識

1.給切片賦值:切片名稱=[ ]數(shù)據(jù)類型{數(shù)據(jù)1,數(shù)據(jù)2}

image.png

2.模板語法不等于

image.png

2.操作

如果借用其它網(wǎng)頁上的元素,需要右鍵點擊檢查,即可得到網(wǎng)頁上元素源代碼,搬運到自己的網(wǎng)頁上

3.邏輯注意點

1.上一頁和最后一頁要判斷當前頁,不是遍歷元素
2.比較哪里該...要是遍歷元素,不是當前頁

一.業(yè)務邏輯

分頁.png

二.界面分析

分析:
1.如果頁數(shù)小于等于7頁, 那么有多少頁就顯示多少頁
1 2 3 4
2.如果頁數(shù)大于7頁, 那么有兩種情況
當前索引小于等于4的時候, 最后顯示 ... 總頁數(shù)
1 2 3 4 5...8
當前索引大于等于總頁數(shù)-3的時候, 前面顯示 1 ...
1 ... 5 6 7 8

效果圖.gif

三.復雜分頁邏輯代碼

1.準備相關(guān)數(shù)據(jù)
1.1 當前頁碼
1.2 每一頁顯示商品個數(shù)
1.3 當前分類總商品數(shù)
1.4 當前分類商品總頁數(shù)
2.創(chuàng)建頁碼對應切片元素

image.png

image.png

四.復雜分頁界面代碼

image.png

五.每頁顯示商品數(shù)量限制

1.計算起始商品位置
2.限制獲取商品條數(shù)

image.png

image.png