頁計數器

Question

所以我在想，如果有通過把在溫泉， 頁計數器辦法，我的意思是你在你的iPhone的底部通過即時通訊使用的東西 頁面滾動的時候，小三個點與此類似 - > http://codepen.io/negibouze/pen/jEvOYz

enter code here 

所以我想它的三個點漂浮在我的屏幕底部的指示用戶可以向左或向右滑動，並點改變，因爲我滾動，所以如果林在第二頁上，第二個點比其他點大

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