Счетчик страниц в Onsen UI

Question

Так что мне было интересно Если бы был способ поставить счетчик страниц в Onsen, , то я имею в виду маленькие три точки, которые вы в нижней части вашего iphone при прокрутке страниц. Im using something похожее на это -> http://codepen.io/negibouze/pen/jEvOYz

enter code here 

так я хочу это, что три точки всплывают в нижней части моего экрана, чтобы указать, что пользователь может проведите пальцем влево или вправо, а многоточие изменить как я прокрутки, так что, если Im на второй странице вторая точка больше остальных

Answer 1

Если вы используете <ons-carousel> как в шаблоне, просто добавьте id в карусель и добавьте postchange прослушиватель событий (при инициализации страницы, где находится карусель), где вы можете изменить размеры точек.

Также измените содержимое тега <ons-carousel-cover> на список, содержащий изображения точек или что-то подобное.

Пример JavaScript:

<script> 
    ons.bootstrap(); 

    document.addEventListener("init",function(event){ 

     if(event.target="#id_of_ons_page_containing_carousel"){ 

      $('#id_of_carousel').on("postchange", function(){ 

       var index=document.querySelector('#id_of_carousel').getActiveIndex(); 
       $('#dot0').height(10); 
       $('#dot1').height(10); 
       $('#dot2').height(10); 
       $('#dot'+index).height(15); 

      }); 
     } 
    }); 
    </script> 

В этом случае <ons-carousel-cover> имеет следующее содержание:

<ons-carousel-cover><div class="cover-label center"> 
     <ul> 
      <li><div> 
       <img id="dot0" height="15" src="White_dot.png" alt="" /> 
      </div></li> 
      <li><div> 
       <img id="dot1" height="10" src="White_dot.png" alt="" /> 
      </div></li> 
      <li><div> 
       <img id="dot2" height="10" src="White_dot.png" alt="" /> 
      </div></li> 
     </ul> 

</div></ons-carousel-cover> 

Для того, чтобы точки, чтобы появиться в одной строке добавьте следующий CSS:

ul { 
    list-style: none; 
    padding-left: 0; 

} 
ul li{ 
    display: inline; 
    min-height: 40px; 
} 
ul li div{ 
    display: table-cell; 
    vertical-align: middle; 
    height: 40px; 
    line-height: 40px; 
}