当前位置: 首页 > 面试题库 >

角度ui路由器滚动到顶部,而不是ui-view

杨和蔼
2023-03-14
问题内容

我刚刚升级到ui-router 0.2.80.2.0和我已经注意到,状态改变时,滚动位置跳到德子的顶部ui-view是新状态的主题。

很好,但是我有两个问题:

1)我在页面顶部和之间填充了30px的空白ui-view,我希望它滚动到页面顶部,并留出一定的空隙。目前,它正好到达ui- view看起来难看的顶部。为此,我想我要么需要知道如何使其滚动到ui视图所在的div的顶部(而不是浏览器viewport),要么我需要找出如何重写$uiViewScroll才能滚动到ui- view负30px 。

我已经尝试过,$uiViewScrollProvider.useAnchorScroll();但是如果这样做,它根本不会滚动。我也尝试过<ui- view autoscroll="false">;,它也完全停止了滚动。

2)它目前实际上并没有滚动,只是跳了起来。是否应该滚动或由开发人员通过CSS转换来做到这一点?

任何帮助将不胜感激:)


问题答案:

另一种方法是装饰默认$uiViewScroll服务,有效地覆盖默认行为。

app.config(function ($provide) {
  $provide.decorator('$uiViewScroll', function ($delegate) {
    return function (uiViewElement) {
      // var top = uiViewElement.getBoundingClientRect().top;
      // window.scrollTo(0, (top - 30));
      // Or some other custom behaviour...
    }; 
  });
});

正如Hubrus所述,对于任何<ui- view>您不希望申请的人,只需添加autoscroll="false"。我没有仔细研究实际的滚动实现,只是想知道我提到了装饰器方法(这很有趣)作为替代方法。我相信您可以算出确切的滚动行为。



 类似资料:
  • 问题内容: 角度ui路由器的示例演示在起始页面具有以下链接: “ ui-router”的完整网址为或 “关于”的完整网址为或 当我使用durandalJS时,存在一个限制,即默认URL只是“ /”,不能有“ / ui-router”。 Angular ui路由器插件有相同的限制吗? 问题答案: 请参阅此处,默认路由有一个“其他”选项。

  • 问题内容: 似乎无法正常工作。通过日期是这样的: 在目标状态上忽略参数 码: 现场示例可以在 这里 找到 谢谢。 问题答案: 您不能在状态之间传递任意参数,您需要将它们定义为定义的一部分。例如 上面的代码将输出定义了contactId属性的对象。如果你去,你会的。 有关更多信息,请参见UI-Router URL路由的文档。

  • 问题内容: 使用ui- router并将父状态URL设置为导致我的URL看起来像在查看子页面时一样。我只想在散列和子项之间添加一个。 我尝试将父状态网址保留为空白,但是使用锚链接时,ui-sref不会链接回父状态。有人知道使用根级别未命名的父URL的解决方案吗? app.config child.config 问题答案: 将有解决方案 _(几乎)_任何东西。有一个工作的plnkr。我们将要使用的功

  • 在我的Angular 2应用程序中,当我向下滚动一个页面并点击页面底部的链接时,它会改变路径并带我进入下一个页面,但它不会滚动到页面顶部。因此,如果第一页很长,而第二页的内容很少,就会给人一种第二页缺少内容的印象。因为只有当用户滚动到页面顶部时,内容才可见。 我可以在组件的ngInit中滚动窗口到页面顶部但是,有没有更好的解决方案可以自动处理我的应用程序中的所有路线?

  • 问题内容: 我想用以下结构构建一个站点header-view,main-view,footer- view。因此,我定义了一个包含页眉和页脚的根路由。root的子代将是我的全部站点。在这些站点中,我将拥有更多的嵌套视图。 在下面的代码中,它确实显示了页眉,但未显示页脚和主视图。一旦删除父级继承,它将显示主视图,但不显示页眉和页脚。 的HTML JS 问题答案: 有一个与正在工作的矮人有关的链接。

  • 问题内容: 我正在建立一个带有角度UI路由器的静态HTML网站进行导航。我基本上有一个带有多个(10+)html模板(页面)的ui视图,可以加载到该视图中。我所有的模板页面都位于名为“页面”的目录中。 所以我基本上想知道我们是否可以在$ stateProvider中仅定义一个状态来动态分配多个模板url,而不是为每个HTML模板页面编写不同的状态(如下所述)。 任何帮助深表感谢。 问题答案: 那应