如何在单页应用程序中处理分页?

米克378

在我的单页应用程序(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页)将丢失,用户需要重新启动它才能继续其项目发现。

这似乎很棘手...
对于这样的用例,我应该选择哪种策略?

奥列格

URL应指示导航。

当我导航到您的网站(例如example.com)时,我希望它位于第一页。

当我导航到您网站的(带有书签)页面时,例如example.com?page=2,我希望位于第二页。

当我按下“后退”按钮时,我期望与上一页完全一样。您无需刷新整个页面,只需监听历史记录事件并相应地进行更新。

我坚信这个问题不属于stackoverflow ...

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在单页应用程序中处理分页?

来自分类Dev

如何在单页 Web 应用程序中处理 node.js 中的“发布”请求

来自分类Dev

如何在单页应用程序中处理敏感数据

来自分类Dev

单页应用程序中的后退按钮处理?

来自分类Dev

如何在单页应用程序中的Google Analytics(分析)中触发页面查看事件?

来自分类Dev

如何在单页应用程序(React JS)中的 csv 文件中写入数据?

来自分类Dev

如何在AngularJS单页应用程序中返回http状态代码?

来自分类Dev

如何在单页Web应用程序中组织模型并实现封装

来自分类Dev

如何在单页应用程序(SPA)中实现ReCaptcha

来自分类Dev

如何在Flutter的单页Web应用程序中实现导航?

来自分类Dev

如何在Vue中为单页应用程序创建导航栏?

来自分类Dev

如何在单页应用程序中对单选按钮进行编码

来自分类Dev

如何在单页应用程序(SPA)中实现ReCaptcha

来自分类Dev

AngularJS-如何在非单页应用程序中从干净的URL读取URL参数

来自分类Dev

如何在单页应用程序中重新获取图像?

来自分类Dev

如何在 Kirby CMS 中为单页应用程序配置 htaccess

来自分类Dev

如何在 angularjs 单页应用程序中显示进度循环

来自分类Dev

如何在 dart 中更改基本单页 Web 应用程序上的内容?

来自分类Dev

Angular中的单页应用程序

来自分类Dev

Angular中的单页应用程序

来自分类Dev

单页应用程序中的RedirectToAction

来自分类Dev

如何使用AngularJS单页应用程序处理页面刷新

来自分类Dev

单页应用程序中的文本编辑器处理Ctrl + Z(撤消/重做)

来自分类Dev

在单页 Web 应用程序中处理服务器上的数据更改

来自分类Dev

如何在客户端单页应用程序中管理服务器用户会话

来自分类Dev

如何在不配置路由的情况下在angularjs单页应用程序中检测页面刷新?

来自分类Dev

如何在单页应用程序中避免与2个以上模板的jQuery操作冲突

来自分类Dev

单页应用程序中的引导程序

来自分类Dev

如何在单页应用程序中使用IndexedDb管理连接

Related 相关文章

  1. 1

    如何在单页应用程序中处理分页?

  2. 2

    如何在单页 Web 应用程序中处理 node.js 中的“发布”请求

  3. 3

    如何在单页应用程序中处理敏感数据

  4. 4

    单页应用程序中的后退按钮处理?

  5. 5

    如何在单页应用程序中的Google Analytics(分析)中触发页面查看事件?

  6. 6

    如何在单页应用程序(React JS)中的 csv 文件中写入数据?

  7. 7

    如何在AngularJS单页应用程序中返回http状态代码?

  8. 8

    如何在单页Web应用程序中组织模型并实现封装

  9. 9

    如何在单页应用程序(SPA)中实现ReCaptcha

  10. 10

    如何在Flutter的单页Web应用程序中实现导航?

  11. 11

    如何在Vue中为单页应用程序创建导航栏?

  12. 12

    如何在单页应用程序中对单选按钮进行编码

  13. 13

    如何在单页应用程序(SPA)中实现ReCaptcha

  14. 14

    AngularJS-如何在非单页应用程序中从干净的URL读取URL参数

  15. 15

    如何在单页应用程序中重新获取图像?

  16. 16

    如何在 Kirby CMS 中为单页应用程序配置 htaccess

  17. 17

    如何在 angularjs 单页应用程序中显示进度循环

  18. 18

    如何在 dart 中更改基本单页 Web 应用程序上的内容?

  19. 19

    Angular中的单页应用程序

  20. 20

    Angular中的单页应用程序

  21. 21

    单页应用程序中的RedirectToAction

  22. 22

    如何使用AngularJS单页应用程序处理页面刷新

  23. 23

    单页应用程序中的文本编辑器处理Ctrl + Z(撤消/重做)

  24. 24

    在单页 Web 应用程序中处理服务器上的数据更改

  25. 25

    如何在客户端单页应用程序中管理服务器用户会话

  26. 26

    如何在不配置路由的情况下在angularjs单页应用程序中检测页面刷新?

  27. 27

    如何在单页应用程序中避免与2个以上模板的jQuery操作冲突

  28. 28

    单页应用程序中的引导程序

  29. 29

    如何在单页应用程序中使用IndexedDb管理连接

热门标签

归档