【问题标题】:AngularJs / Scrolling infinite and back buttonAngularJs /滚动无限和后退按钮
【发布时间】:2014-09-23 09:43:49
【问题描述】:

假设有一个网页位于/items,列出了所有可用的项目。
当用户点击一项时,浏览器会显示/items/:itemId并显示该项的详细信息。

当然,项目列表可能非常大。
这就是我使用scroll infinite feature from Ionic(我使用的基于Angular 的框架)的原因。

但是,正如许多开发人员所知,处理从 /items/:itemId/items 的“后退按钮”很棘手,因为 Angular 的控制器在页面转换期间被销毁,然后在再次加载列表页面时重新构建。
因此在单击项目的详细信息之前会丢失滚动位置和已加载的确切项目。

我想到了一些解决方案,但我犹豫了,因为都有一个“缺点”:

  • 在项目详细信息即将显示之前将实际加载的项目(完整项目)存储在$cacheFactory(Angular 的缓存或本地存储)中。
    因此,当按下后退按钮时(在详细信息页面上),/items 的控制器可以从缓存中初始化数据,并且可以轻松地“记住”滚动位置。
    缺点是缓存中的数据可能是陈旧的......

  • “无需在缓存中存储任何加载的项目!”只需将实际加载的块数存储在缓存或本地存储中即可。
    例如,我的 REST API 允许逐个检索 10 个项目。
    如果用户加载到第二个块(最多 20 个元素),缓存中的变量将包含此值,然后控制器可以初始化所有 20 个项目。
    缺点是它会涉及对服务器的多个请求。事实上,如果用户加载了 30 个块,控制器将需要对服务器进行 30 次调用...... 我可以自定义服务器处理的块的大小,但是一项很重(几个长文本等。任何东西的列表),这解释了为什么我限制在一个相对较小的数字。

  • 使用双向滚动(顶部和底部),这样 DOM 中总是有 10 个项目。我只需要存储已加载的最后一个块数,以便重新加载它。
    缺点:我必须自己编写指令(可能是这样),因为目前没有 Angular(也不是 Ionic)指令。
    而且我认为双向仅在处理非常非常大的列表时才有用:超过 2000 行,以减轻 DOM。
    在我的大多数情况下,我预计不会超过 400 行...

什么是好的做法?也许另一种解决方案?

【问题讨论】:

    标签: javascript angularjs web-applications scroll ionic-framework


    【解决方案1】:

    这有点作弊,但是使用 Modal (http://ionicframework.com/docs/api/service/$ionicModal/) 来渲染细节呢?

    【讨论】:

    • 我想过这个,但是细节本身包含打开一些需要的模态的按钮。重叠模态不会很有用户体验。你怎么看?此外,它会共享父 $scope ...丑陋的
    • 是的 - 同意。从理论上讲,您可以更改模态视图而不是弹出更多模态?
    • 如果我更改模态视图,控制器模态将不会很...SRP(单一责任原则)。具体来说,显示页面有一个右上角的按钮,用于打开聊天模式。如果我将聊天逻辑与显示逻辑混合在一起,那将是一团糟。左上角的按钮是充当后退按钮的“箭头”。
    • 此外,我们知道模态框的右上角有一个“关闭”按钮。我将在哪里显示“聊天”按钮? .. 听起来很棘手
    • 公平点所有 - 好的 - 好吧 - 这是一个远射。 ;) 如果我必须选择你的 3 个中的一个,我想我会选择 #1。
    猜你喜欢
    • 2016-05-12
    • 1970-01-01
    • 2014-07-25
    • 1970-01-01
    • 1970-01-01
    • 2013-05-07
    • 1970-01-01
    • 1970-01-01
    • 2014-05-17
    相关资源
    最近更新 更多