如何在單頁應用程序中處理分頁？

Question

在我的單頁應用程序（Javascript（AngularJs）Webapp）上，我正在顯示一個分頁的項目列表。
我每頁顯示10個項目。

為了保留用戶在其他頁面上導航時隨時打開的當前分頁，我將當前頁碼放在瀏覽器的localStorage上。 這是工作流程的示例：

• 用戶轉到myItemsList.html 。
• 他打開涉及URL的頁面2： myItemsList.html?page=2 。
• 然后，他轉到另一個頁面： myOtherPage.html 。
• 他返回到最初指向myItemsList.html的鏈接，該鏈接由於localStorage而直接顯示頁面myItemsList.html?page=2 ，以便可能繼續導航。

這會使用戶感到困惑，也許希望將頁面1視為新的開始導航。
如果我顯示在列表的頂部，則會出現類似“第2頁”的標簽，以警告他他正在瀏覽導航的前面部分，這對UX友好嗎？

還是應該完全避免持續當前的分頁？

如果我不堅持當前瀏覽的頁面，可能會發生以下情況：

• 用戶轉到myItemsList.html 。
• 他打開涉及URL的頁面2： myItemsList.html?page=2
• 他在此頁面（“顯示”頁面）中打開一個項目，導致： myItemsList.html?id=123
• 他單擊瀏覽器的“后退”按鈕，刷新了myItemsList.html （由於“單頁應用程序”）。 當前的分頁（第2頁）將丟失，用戶需要重新啟動它才能繼續其項目發現。

這似乎很敏感...
對於這樣的用例，我應該選擇什么策略？

Answer 1

通過導航保存進度是SPA UX設計中的預期行為，因此可以保持他在正確的頁面中，並且由於它是分頁，即使用戶希望返回任何頁面也不會成為問題。 ，只需點擊一下即可。

Answer 2

首先，我將避免使用localstorage而是使用服務來持久化您的頁面計數器。 其次，您不需要將pg counter持久保存到范圍變量中，而是刷新到下一頁數據。 您甚至可以考慮只添加類似於無限滾動用例的結果。 但是無論哪種方式，您都可以使用局部范圍變量進行分頁。 是否直接進入上次瀏覽的頁面-是一個更商業的決定，將取決於需求。

但是您可以非常輕松地使用廣播來持久化或刪除持久化數據，並根據偵聽的事件來觀察並確定持久性。

希望這對您有幫助...

Answer 3

像這樣在JS中保持某種繼承關系又如何呢：

假設用戶導航到名為“客戶搜索”的部分

customer_search.customer_display.page = 2

其中customer_search是子部分，customer_display是您定位的帶有分頁的視圖。

menu.menu_items.page=7

其中menu是該小節，menu_items是具有分頁的視圖

如果您的應用程序以合理的層次結構進行組織，則可能會起作用。

可能還可以在$ scope中為該特定控制器維護頁面。

Answer 4

URL應指示導航。

當我導航到您的網站（例如example.com）時，我希望它位於第一頁。

當我導航到您網站的（帶有書簽）頁面時，例如example.com?page=2，我希望位於第二頁。

當我按下“后退”按鈕時，我期望與上一頁完全一樣。 您無需刷新整個頁面，只需監聽歷史記錄事件並相應地進行更新。

我堅信這個問題不屬於stackoverflow ...