温泉 UI 教程页面

Question

我想使用 Onsen UI 制作上述应用程序教程效果。但是，在 Page Patterns of Onsen UI 中，我没有看到任何类似的东西。有人可以解释一下吗？

非常感谢。

Answer 1

我认为您要找的是轮播。您可以使用 <ons-carousel> 组件制作一个。

在这种情况下，您想要一个可滑动的全屏轮播，因此您可以这样定义它：

<ons-carousel swipeable overscrollable auto-scroll fullscreen>
  <ons-carousel-item>
    Content #1
  </ons-carousel-item>
  <ons-carousel-item>
    Content #2
  </ons-carousel-item>
</ons-carousel>

这是一个全屏轮播的简单示例： http://codepen.io/onsen/pen/xbbzOQ

另请查看文档： http://onsen.io/reference/ons-carousel.html

如果你想要子弹，你可以使用carousel.getActiveCarouselItemIndex()来获取当前活动元素。

<ons-carousel-cover>
  <div class="bullets">
    <span 
      ng-repeat="idx in indices"
      ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
      •
    </span>
  </div>
</ons-carousel-cover>

您还需要触发一个摘要事件来让 Angular 了解发生了某些变化。

这是代码： http://codepen.io/argelius/pen/RWomrz

温泉 UI 教程页面

Onsen UI Tutorial Page

onsen-ui