温泉UIのページカウンター

Question

温泉にページカウンターを置く方法があれば、 これは、ページをスクロールするときにあなたのiPhoneの一番下にある小さな3つの点を意味しています。 これに似た - > http://codepen.io/negibouze/pen/jEvOYz

enter code here 

だから私はイム場合は3つのドットは、ユーザーがスワイプ左または右にできることを示すために私の画面の下部に浮く、と私はスクロールするとドットが変化するので、ということをしたいです第2ページでは、第2ドットが残りのドットより大きい

Answer 1

Ifテンプレート内で<ons-carousel>を使用している場合は、カルーセルにIDを追加して、ドットのサイズを変更することができるイベントリスナーを（カルーセルがあるページの初期化時に）追加します。

また、<ons-carousel-cover>タグの内容を、ドットなどのイメージを含むリストに変更します。

例Javascriptを：ドットが次のCSSを追加する1行に表示するためには

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

：この場合

<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>は以下の内容を持っている

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; 
}