navigation 相关问题

错误类型错误：无法读取未定义的属性“导航”，js引擎：hermes

当我从初始屏幕导航到语言选择屏幕时，我收到此错误，我尝试了所有方法，但我不知道为什么，我尝试使用“useNavigation”，但它仍然给出错误，所以我

NextJS侧边栏如何在主内容上推送路由

我在 NextJS 应用程序中有一个侧边栏，并且一个主要组件放置在一行中。侧边栏有多个项目，单击每个项目可通过推送路线更新主要内容 （更新...

从片段导航时底部导航栏出现故障

我将底部导航栏与导航组件一起使用 为了使这两个组件协同工作，我调用了： 底部NavigationView.setupWithNavController(navController) 一切正常

如何导航到之前内置于 flutter 中的屏幕？

我在我的主页上调用了一系列API，并在从服务器接收数据后创建了一系列小部件。 我想缩短这些小部件的加载时间，所以我想要我的...

将 BottomNavigation 与列表相结合 - Jetpack compose 中带有动画的详细导航

给定一个带有一些底部栏按钮和部分的典型应用程序，用户可以在其中从列表导航到详细信息，理想情况下，我希望为底部栏过渡保留良好的默认淡入淡出效果，并且...

如何在堆栈中仅保留一个可组合屏幕？

我有一个用于平板电脑实现的可组合屏幕，在左侧有一个带有按钮列表的面板，一旦用户单击这些按钮中的任何一个，它就会在...

NextJS Route.push 从侧边栏重建整个应用程序

我在 NextJS 应用程序中有一个侧边栏，并且一个主要组件放置在一行中。侧边栏有多个项目，单击每个项目可通过推送路线更新主要内容 （更新...

react Native expo中layout.tsx有什么用？

之前我是使用js来编写react native expo代码，但现在typescript已经成为expo的默认语言（它已经是react native CLI的默认语言），所以我有点自信......

我可以阻止 Blazor 中的导航吗？

在 Blazor 服务器端应用程序中，是否涉及一些执行实际导航的 javascript，例如当用户点击链接时？ 我的意思是像 window.history.pushState(..) 这样的东西。 理论上是吗

如何使用导航栏覆盖内容？

我希望导航栏与应用程序中的所有内容重叠，我使用以下代码来尝试执行此操作： 场景委托 类 SceneDelegate: UIResponder, UIWindowSceneDelegate { var 窗口：UIWind...

无法在带有框架的窗口中触发命令

我有一个 WPF 窗口，其网格包含 4 个矩形。其中之一有一个用于显示页面的 ，在我的应用程序中使用。我想向窗口上的这些按钮添加命令...

SwiftUI LazyVGrid 暂停导航

我在使用列表和 LazyVGrid 实现 NavigationView 时遇到问题。在第一个 switch 语句中，我使用 TabView 来显示水平视图，在第二个 switch 语句中，我...

创建可见性图表或类似的多边形之间的导航

我有一组多边形作为在 QGIS 中创建的形状文件，代表丹麦的深度模型，其中水为 2m 或更浅。我希望创建一个可见性图表或类似的导航...

尝试在MAUI中传递查询参数

这是改变位置的函数： 字符串restaurantId = (string)e.Parameter; Console.WriteLine(restaurantId); 等待 Shell.Current.GoToAsync($"location?restaurantId={restaurantId}&q...

光滑滑块自定义点

我想知道是否有办法使用自定义光滑滑块点。当我搜索时，我能找到的只是有关如何将幻灯片中的点更改为缩略图的示例，但这不是我想要的

上一个屏幕的颤动中的导航问题

在我的应用程序中，我有第六个屏幕，每个屏幕都有一个按钮。当您单击该按钮时，您将导航到下一个屏幕。我想尝试当您点击屏幕按钮时导航到第三个屏幕并删除 fo...

Flutter ModalRoute.of(navKey.currentContext!).settings.name 始终为`/`

我是Flutter新手，对导航不太了解。我在我的应用程序中使用演示代码。我想获取当前的 RouterSettings.name 这样我就可以防止重复的路由器推送，但是 ModalRoute.of(nav...

如何在反应导航的底部选项卡中拥有自定义视图，检查图像

我想要一个自定义选项卡视图，其中中间选项卡在下面缩进以实现完整的波浪形状，我尝试使用图像背景作为底部选项卡，但我还没有走得太远

仅 CSS / 基本 JS 解决方案，用于在悬停时将辅助链接覆盖与主链接对齐

我创建了这个codepen：https://codepen.io/AnkitaSood/pen/dyEWNaB 这是带有主链接和辅助链接的导航的基本模板： ... 我创建了这个codepen：https://codepen.io/AnkitaSood/pen/dyEWNaB 这是带有主链接和辅助链接的导航的基本模板： <nav> <ul> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 1</a> <div class="secondary-links"> </div> </div> </li> ... </ul> 我想让导航在 y 轴溢出时可滚动。我还希望能够始终在悬停时显示辅助链接。当前，悬停在最后一个主链接上时，并非所有与其关联的辅助链接都不会显示。我希望该容器对齐，以便该容器的底部与最后一个主链接的底部对齐，如屏幕截图所示： 您可以将辅助列表的后半部分放置为底部：0而不是顶部：0，因为您知道上面的空间比下面的空间更多。 此代码片段使用 nth-last-child(-n+5)hoas 选择器将列表中最后 5 个的 top: 0 替换为 Bottom: 0。 请注意，必须将 top 重置为初始值，否则仍将采用 top: 0。 a { text-decoration: none; } .root { display: flex; flex-direction: column; height: 100%; place-content: center; width: 100%; } .pages { display: flex; height: 100%; overflow: hidden; border: 1px solid red; } .main { height: 100%; overflow: auto; padding: 1rem; } .main-content { display: flex; flex-direction: column; height: 100%; min-width: 0; width: 100%; background: lightgreen; } .main-content-section { height: 100%; overflow: auto; padding: 1rem; } nav { background: #1e1e1e; min-width: 8rem; box-sizing: border-box; display: flex; flex-direction: column; } ul { list-style-type: none; padding-left: 0; } .main-link-container { position: relative; } .main-link { color: #e0e0e0; display: flex; align-items: center; box-sizing: border-box; height: 3rem; padding: 0 0.5rem; text-decoration: none; &:hover { background-color: #1a344d; color: #f5f5f5; } &.active { background-color: #353535; color: #f5f5f5; +.secondary-links { display: block; position: unset; background-color: unset; } } &:not(.active):hover+.secondary-links { display: block; } } .secondary-links { display: none; left: 8rem; min-width: max-content; position: absolute; top: 0; z-index: 10; background-color: #292929; border-radius: 0 0.25rem 0.25rem 0; box-sizing: border-box; &:has(.sec-link.active) { display: block; position: unset; background-color: unset; a { border-radius: 0.25rem; margin: 0.25rem 0.75rem; padding: 0 0.5rem 0 2.25rem; } } &:has(a:hover) { display: block; } } li:nth-last-child(-n+5) .secondary-links { bottom: 0; top: initial; } .sec-link { color: #e0e0e0; display: block; line-height: 2.5rem; padding: 0 1rem; &:hover { background-color: #1a344d; color: #f5f5f5; text-decoration: none; } &.active { border-radius: 0.25rem; margin: 0.25rem 0.75rem; padding: 0 0.5rem 0 2.25rem; background-color: #353535; color: #65adf6; } } <div class="root"> <div class="pages"> <nav> <ul> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 1</a> <div class="secondary-links"> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 2</a> <div class="secondary-links"> <a href="#" class="sec-link"> Sub link 1 </a> <a href="#" class="sec-link"> Sub link 2 </a> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 3</a> <div class="secondary-links"> <a href="#" class="sec-link"> Sub link 1 </a> <a href="#" class="sec-link"> Sub link 2 </a> <a href="#" class="sec-link"> Sub link 3 </a> <a href="#" class="sec-link"> Sub link 4 </a> <a href="#" class="sec-link"> Sub link 5 </a> <a href="#" class="sec-link"> Sub link 6 </a> <a href="#" class="sec-link"> Sub link 7 </a> <a href="#" class="sec-link"> Sub link 8 </a> <a href="#" class="sec-link"> Sub link 9 </a> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 4</a> <div class="secondary-links"> <a href="#" class="sec-link"> Sub link 1 </a> <a href="#" class="sec-link"> Sub link 2 </a> <a href="#" class="sec-link"> Sub link 3 </a> <a href="#" class="sec-link"> Sub link 4 </a> <a href="#" class="sec-link"> Sub link 5 </a> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 5</a> <div class="secondary-links"> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 6</a> <div class="secondary-links"> <a href="#" class="sec-link"> Sub link 1 </a> <a href="#" class="sec-link"> Sub link 2 </a> <a href="#" class="sec-link"> Sub link 3 </a> <a href="#" class="sec-link"> Sub link 4 </a> <a href="#" class="sec-link"> Sub link 5 </a> <a href="#" class="sec-link"> Sub link 6 </a> <a href="#" class="sec-link"> Sub link 7 </a> <a href="#" class="sec-link"> Sub link 8 </a> <a href="#" class="sec-link"> Sub link 9 </a> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 7</a> <div class="secondary-links"> <a href="#" class="sec-link"> Sub link 1 </a> <a href="#" class="sec-link"> Sub link 2 </a> <a href="#" class="sec-link"> Sub link 3 </a> <a href="#" class="sec-link"> Sub link 4 </a> <a href="#" class="sec-link"> Sub link 5 </a> <a href="#" class="sec-link"> Sub link 6 </a> <a href="#" class="sec-link"> Sub link 7 </a> <a href="#" class="sec-link"> Sub link 8 </a> <a href="#" class="sec-link"> Sub link 9 </a> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 8</a> <div class="secondary-links"> <a href="#" class="sec-link"> Sub link 1 </a> <a href="#" class="sec-link"> Sub link 2 </a> <a href="#" class="sec-link"> Sub link 3 </a> <a href="#" class="sec-link"> Sub link 4 </a> <a href="#" class="sec-link"> Sub link 5 </a> <a href="#" class="sec-link"> Sub link 6 </a> <a href="#" class="sec-link"> Sub link 7 </a> <a href="#" class="sec-link"> Sub link 8 </a> <a href="#" class="sec-link"> Sub link 9 </a> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 9</a> <div class="secondary-links"> <a href="#" class="sec-link"> Sub link 1 </a> <a href="#" class="sec-link"> Sub link 2 </a> <a href="#" class="sec-link"> Sub link 3 </a> <a href="#" class="sec-link"> Sub link 4 </a> <a href="#" class="sec-link"> Sub link 5 </a> <a href="#" class="sec-link"> Sub link 6 </a> <a href="#" class="sec-link"> Sub link 7 </a> <a href="#" class="sec-link"> Sub link 8 </a> <a href="#" class="sec-link"> Sub link 9 </a> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 10</a> <div class="secondary-links"> <a href="#" class="sec-link"> Sub link 1 </a> <a href="#" class="sec-link"> Sub link 2 </a> <a href="#" class="sec-link"> Sub link 3 </a> <a href="#" class="sec-link"> Sub link 4 </a> <a href="#" class="sec-link"> Sub link 5 </a> <a href="#" class="sec-link"> Sub link 6 </a> <a href="#" class="sec-link"> Sub link 7 </a> <a href="#" class="sec-link"> Sub link 8 </a> <a href="#" class="sec-link"> Sub link 9 </a> </div> </div> </li> <li> <div class="main-link-container"> <a href='#' class="main-link">Link 11</a> <div class="secondary-links"> <a href="#" class="sec-link"> Sub link 1 </a> <a href="#" class="sec-link"> Sub link 2 </a> <a href="#" class="sec-link"> Sub link 3 </a> <a href="#" class="sec-link"> Sub link 4 </a> <a href="#" class="sec-link"> Sub link 5 </a> <a href="#" class="sec-link"> Sub link 6 </a> <a href="#" class="sec-link"> Sub link 7 </a> <a href="#" class="sec-link"> Sub link 8 </a> <a href="#" class="sec-link"> Sub link 9 </a> </div> </div> </li> </ul> </nav> <main class="main-content"> <section class="main-content-section"> main content goes here </section> </main> </div> </div> 注意：这仍然不能解决如果没有足够的空间来显示所有辅助列表会发生什么的问题，但这是一个不同的问题。

如何有条件地阻止按下导航后退按钮？

我有视图A： 结构虚拟：查看{ var body: 一些视图 { 导航栈{ 导航链接（目的地：ViewB（））{ Image(systemName: "gear") //