winjs中水平列表视图中的左右导航

Question

我们如何像 Windows store 那样实现？ 'Listview' 带有动画的左右导航箭头？我尝试了 'Flipview'、'HubControl'，而且，每当我在 'Listview' 上尝试 'ensureVisible' 时，'Listview' 中都没有动画。如何在使用左右箭头导航时实现动画内容？

Answer 1

WinJS.UI.Pivot 在 playground 中有带 ListView 的箭头。 http://winjs.azurewebsites.net/#pivot

WinJS.UI.FlipView也是 http://winjs.azurewebsites.net/#flipview

但也许你想要 WinJS.UI.NavBar http://winjs.azurewebsites.net/#navbar

Answer 2

抱歉，之前误解了你的问题。我认为您必须使用 ListView 并在其上方的图层上绘制您自己的按钮。

当您按下按钮时，您可以使用 scrollPosition 属性 获取 ListView 的当前滚动位置。获取 ListView 的当前宽度并将其添加到 scrollPosition 或从中减去。但是，这不会自动为滚动设置动画。

您还可以使用 ensureVisible() 方法滚动到特定项目。

要使 ListView 在跳转到新位置时具有动画效果，我认为您将不得不使用 WinJS.UI.executeAnimation 来完成。 https://msdn.microsoft.com/en-us/library/windows/apps/hh779762.aspx

我以前做过，但老实说我不记得它是如何工作的。我知道您必须为 CSS 中的动画行为设置一些规则，然后 运行 它在 javascript 中异步设置。