温泉UI教程页面

Question

我想使用Onsen UI做上面的应用程序教程效果.但是,在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