Axure繪制Web產品分頁組件的方法:
01常見分頁樣式列舉了幾種常見的分頁組件樣式，PM可以根據自己的需求選擇合適的樣式。
02分頁的常見元素分頁組件通常包含以下元素，PM可以自由組合其中的壹些元素。
Total x計算當前列表或搜索列表的總數，以及每頁顯示多少條數據。
Y條目通常有10或每頁20個條目。如果列表數據特別大，用戶可以選擇。
數字頁碼顯示頁碼1，2，3，4。點擊跳轉到相應的N頁，加載列表數據。
第壹頁和最後壹頁可以用文本按鈕或圖標來表示，如上面的樣式5和樣式6所示。
回到上壹頁或進入下壹頁，可以使用圖標"
& lt表示上壹頁，圖標“>”表示下壹頁。轉到第n頁，輸入壹個數字，然後按Enter或return進入相應的頁面。如果只有壹頁，則不會顯示“轉到第n頁”。
03分頁的常見狀態初始狀態是分頁的初始狀態。加載列表時，妳可能會看到它壹閃而過。
選中狀態是分頁的默認狀態，選擇當前頁碼並顯示相應的交互效果。
懸停狀態是懸停壹個頁碼時顯示的交互效果。
點擊狀態是指點擊頁碼時顯示的交互效果。壹般不需要設置。
1.如何繪制初始狀態從默認組件庫中拖動“矩形1”到畫布的適當位置，大小改為25*25，雙擊輸入“1”。復制n份然後修改成相應的數字，相鄰間隔設置為5px。
2.如何繪制選中狀態，同時選中這些組件？右鍵交互樣式顯示彈出窗口交互樣式，切換到選中的選項卡，勾選填充顏色設置為藍色#0000FF，勾選單詞顏色設置為#FFFFF。
點擊第壹個組件，即頁碼1，右側邊欄會切換到“交互”按鈕，點擊“新建交互”按鈕，選擇觸發事件“點擊時”，添加動作“設置選中”，選擇“當前組件”作為目標。然後將該事件復制到其他頁碼元素中。
同時選擇這些組件，右鍵單擊“選項組”，在彈出窗口中設置組名“頁碼”，點擊“確定”。
點擊頁碼為1的組件，右鍵“選擇”，這樣在查看原型時，就意味著默認進入列表的第壹頁。
3.懸停狀態如何繪制點擊第壹個組件，即頁碼1，右鍵“交互樣式”顯示彈出窗口，切換到“鼠標懸停”，勾選單詞顏色後改為藍色#0000FF，勾選線段顏色後設置為藍色#0000FF，勾選邊框寬度為1，點擊確定。然後將交互樣式復制到其他頁碼元素。
4.如何繪制點擊狀態和選中狀態是壹樣的。詳情見上文。
分頁的交互效果分頁組件的交互效果實際上就是繪制各個元素的交互效果。
1.顯示總數效果1。將“文本標簽”從默認組件庫中拖動到畫布上的適當位置，雙擊修改代表初始值的文本“Total X”。字色改為#7F7F7F。
2.點擊頁面空白區域，右邊的側邊欄會切換到“交互”。點擊“新建交互”按鈕，選擇觸發條件“頁面加載時”，添加動作“設置文本”，選擇“Total X”的元素作為目標，在值後點擊fx進入彈出窗口“編輯文本”，點擊下面“添加局部變量”的文本按鈕，然後自動生成變量[lvar6544然後在上面的輸入框中點擊X，然後選擇item。在“插入變量或函數”文本按鈕後的下拉框中計數，得到最終的函數，最後點擊“確定”。
3.單擊“預覽”按鈕，然後在瀏覽器中查看原型效果。
2.調整每頁文章數的效果是1。將“下拉列表框”從默認組件庫中拖動到畫布的適當位置，大小修改為80*25px。雙擊彈出窗口中的“編輯下拉列表”，點擊“編輯多項”，然後在相應彈出窗口的輸入框中輸入多個值。最後，點擊“確定”保存。當然，妳也可以點擊“添加”按鈕逐個添加。
2.點擊下拉列表框，右側邊欄會切換到“交互”。點擊“新建交互”按鈕，選擇觸發條件“選項改變時”，添加動作“設置每頁項目數”，選擇列表值的repeater元素作為目標，選擇第二個列表項。在值後點擊fx進入彈出窗口“編輯文本”，點擊下面的“添加局部變量”文本按鈕。
然後點擊上面的“插入變量或函數”文本按鈕，在下拉框中選擇substr(start，length)並自動填充到輸入框中，將變量LVAR改為LVAR1，長度改為2取前兩個字符，從而得到最終的函數，最後點擊“確定”按鈕。
3.因為當切換每頁的項目數時，列表內容會被擴展，從而阻塞相應的內容，所以我們需要做壹些處理。右鍵單擊列表項repeater將其轉換為動態面板，然後將其命名為list。然後繼續點擊下拉列表框，在原動作前面添加顯示/隱藏動作，選擇目標的列表動態面板，點擊隱藏，切換更多選項拉組件，在原動作後面添加顯示/隱藏動作，選擇目標的列表動態面板，點擊。
4.單擊“預覽”按鈕，然後在瀏覽器中查看原型效果。
3.單擊以指定頁碼效果。在之前交互風格的基礎上，點擊+繼續添加“設置當前顯示頁面”動作，選擇“列表值”repeater為目標，點擊頁碼後面的fx進入彈出窗口“編輯值”，點擊文本按鈕“添加局部變量”自動創建變量獲取當前組件的文本，再點擊文本按鈕“插入變量或函數”然後選擇lvar65438+。然後將該事件復制到其他頁碼元素中。
點按“預覽”按鈕，然後在瀏覽器中查看原型效果。
4.單擊上壹頁和下壹頁效果。在點擊指定頁碼效果的基礎上，從默認組件庫中拖動“矩形1”到頁碼前面的位置，大小改為25*25px，雙擊回車“”表示下壹頁。
點擊"
點擊“| |”組件，右側邊欄切換到交互，點擊新建交互按鈕，選擇觸發事件“點擊時”，添加動作“設置當前顯示頁面”，選擇列表值repeater為目標，頁面切換到最後壹頁，點擊完成按鈕。點按“預覽”按鈕，然後在瀏覽器中查看原型效果。6.轉到指定頁碼效果。將默認組件庫中的“文本框”拖動到前面適當的位置，將大小改為40*25px的適當大小，命名為“輸入頁碼”，並提示文本在框中輸入“頁碼”。然後將默認組件庫中的“文本標簽”拖動到畫布上的適當位置，雙擊輸入文本“跳轉”。
點擊“跳轉”按鈕，右側邊欄會切換到“交互”，點擊“新建交互”按鈕，點擊“+”繼續添加“設置當前顯示頁面”的動作，選擇“列表值”repeater作為目標，點擊頁碼後的fx進入彈出窗口“編輯值”，點擊文本按鈕“添加局部變量”自動創建變量獲取當前組件的文本，修改目標組件如下。點按“預覽”按鈕，然後在瀏覽器中查看原型效果。
以上是關於“Axure如何繪制Web產品的分頁組件？”我已經分享了所有精彩的內容，希望妳能從中有所收獲！如果妳覺得壹篇文章不夠過癮，那麽不要錯過Axure相關文章！總之，學習道路和單壹的知識很難實現全面的自我發展！如果妳想完全精通壹門技能，那麽妳必須全面學習！加油，全面學習Axure，全面獲取知識點，快速有效推進自主原型設計~