温泉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