онсэн UI Учебник Page

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