如何实现像圆圈一样的导航?

Posted

技术标签:

【中文标题】如何实现像圆圈一样的导航?【英文标题】:How do I implement Navigation that behaves like a circle? 【发布时间】:2021-12-09 16:14:10 【问题描述】:

我有 4 页。现在我的应用从 page1 开始。

导航应该是这样的: 第 1 页 > 第 2 页 > 第 3 页 > 第 4 页 并且 page4 应该再次打开 page1。以此类推。

页面不需要记住调用的页面 await Navigation.PushModalAsync(NextPage) 因此,我不认为 hirachial 导航是解决问题的方法。 我不知道我要处理什么... 我考虑过使用页面的可见性或使用 CarouselPage ...... 也许有人知道如何实现这种行为...... 非常感谢大家!

【问题讨论】:

【参考方案1】:

如果导航没有改变,可能是这样的。

在 App.xaml.cs 中

MainPage = new NavigationPage(new page1());

从第 1 页开始

然后在第 1 页点击了一个按钮

 private async void Button_Clicked(object sender, EventArgs e)
    
   
            await Navigation.PushAsync(new page2());
    

在第2页按钮

 private async void Button_Clicked(object sender, EventArgs e)
    
      
            await Navigation.PushAsync(new page3());
    

第 3 页按钮

 private async void Button_Clicked(object sender, EventArgs e)
    
      
            await Navigation.PushAsync(new page4());
    

然后在第 4 页

 private async void Button_Clicked(object sender, EventArgs e)
    
     
            await Navigation.PushAsync(new page1());
    

如果使用它,您可能需要删除后退按钮

【讨论】:

我认为如果您使用相同的页面,这不起作用。我不想创建“新”页面... 等待 Navigation.PushAsync(new page1());这意味着导航到现有页面。 所以 new 关键字并不意味着它正在创建一个新实例? 我现在正在做一个例子,它是如何工作的,一会儿 该示例有 4 页,我隐藏了后退按钮,因此您只能导航到下一页。 github.com/borisoprit/Pagenavigation

以上是关于如何实现像圆圈一样的导航?的主要内容,如果未能解决你的问题,请参考以下文章

像 Instagram iPhone 应用程序一样向右滑动时导航弹出视图。我如何实现这一点?

如何制作像 Instagram 一样的导航栏

[小技巧]如何用css3实现导航栏像音符一样跳动起来

如何使用 React PWA 像原生 iOS 应用一样进行导航转换?

导航控制器 - 斯威夫特

如何制作像 Instagram 故事个人资料图像一样的圆形图像