温泉页面计数器 UI

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

温泉页面计数器 UI

Page counter in Onsen UI

onsen-ui