Question

所以我想知道是否有办法在温泉放置一个页面计数器，我的意思是你滚动浏览页面时你在iPhone底部的小三个点我使用类似的东西 - ＆gt; 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;
}

Onsen UI中的页面计数器

1 个答案: