如何在Metro风格应用中实现滑动页面转换

Question

我想在Metro Style App中使用幻灯片样式实现页面转换.

效果看起来像

    state 1                     state 2                   state 3
 ____________              _______________             ____________  
|            |            |       |       |           |            |
|   page A   |    ====>   |page A |page B |   ====>   |   page B   |
|            |            |partial|partial|           |            |
|____________|            |_______|_______|           |____________|

它将通过平移手势从右向左滑动来触发(没有触发系统工具栏,我不知道如何隔离它们).

我打得瓦特/ exitPage/enterPage但没有运气:好像之前B页面中获取页面A被消失了.
此外,我读过一个页面导航,片段加载的代码示例和滚动/平移的代码示例想想吧,将当前页面和新页面放在div包装器中,并在div中调用它们navigate().但这可能会破坏CSS的位置,我不知道什么时候可以安全地调用新页面的JS ...

更新1也许FlipView可以做到这一点？

更新2找到加载本地页面的方法FlipView,发现有用的链接的掌握,但仍然困惑...

• FlipView w/innerHTML内部Template使用外部RSS feed
• 绑定iframe w/ListView
• ListView w/HTMLControl内容

update 3FlipView通过PageControl完全定义页面并渲染其中一个PageControl内部FlipView.itemTemplate来计算出一个原始版本的用法,这是否合适？

那么,任何合适的解决方案或明智的想法？谢谢!

Answer 1

我用过FlipView这个。WinJS.UI里面的代码base.js解释了有关效果的所有内容（正如多米尼克霍普顿提到的）。这FlipView对于我当前的使用来说已经足够了（不过将来可能需要定制额外的翻转行为）。

FlipView在开始时立即加载所有页面，为了减少过载，我

1. 延迟加载简单占位div符，而不是首先PageControl加载/PageControl卸载. 这会带来一个副作用，当页面在视口内可见（或隐藏）时会触发该效果，非常方便。onpagecompleted/onpagechangedvisibilityFlipViewPageControl.ready/unload
2. 通过增量加载额外页面itemDataSource（也许还可以动态卸载？）

另外，额外的FlipViews 可以用在PageControlwrapped by内部FlipView，MSDN 没有提到这一点。