温泉转盘 - 在中心显示当前项目

Question

我正在尝试使用 Onsen 创建旋转木马，非常简单，但是我希望当前选择的项目位于中心。

我将 5 个项目的初始索引设置为 2，项目宽度设置为 30%。这允许显示多个项目，而第三个项目是最初选择的项目。有没有人知道如何让选中的项目始终显示在中间？

我还将把它改成无限旋转木马，这应该不会太棘手，但可能需要牢记。

基本代码如下...谢谢。

<ons-carousel modifier="brand-carousel direction="horizontal" item-width="30%" initial-index="2" swipeable>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
</ons-carousel>

Answer 1

ons-carousel 项存储在零索引数组中。如果要动态添加项目，只需简单地获取数组长度，除以 2 并四舍五入为整数即可。使用 JS，您可以使用 setActiveCarouselItemIndex(index, options); 指定特定的活动项目。有关详细信息，请参考位于此处的用户指南：https://onsen.io/guide/overview.html#UsingCarousel

编辑：这是完整的工作代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI 2.0 Quickstart</title>

    <script src="components/loader.js"></script>
    <script src="lib/onsenui/js/onsenui.js"></script>

    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" type="text/css" media="all" />

    <style>
        ons-carousel-item {
          display: table;
          text-align: center;
        }

        .item-label {
          display: table-cell;
          vertical-align: middle;
          color: white;
          line-height: 1;
          font-size: 48px;
          font-weight: bold;
        }

        .cover-label {
          text-align: center;
          position: absolute;
          left: 0px;
          width: 100%;
          bottom: 10px;
          color: white;
        }
    </style>

    <script>
        function setIndex(){
          var cnt = document.getElementById('myC').getCarouselItemCount();
          var midItem = Math.floor(cnt/2);
          document.getElementById('myC').setActiveCarouselItemIndex(midItem);
        }
    </script>

</head>

<body>
 <ons-page>
  <ons-carousel swipeable overscrollable auto-scroll fullscreen id="myC">
    <ons-carousel-item style="background-color: gray;">
      <div class="item-label">GRAY
      <ons-button onclick="setIndex()">Click Me</ons-button></div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #085078;">
      <div class="item-label">BLUE</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #373B44;">
      <div class="item-label">DARK</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #D38312;">
      <div class="item-label">ORANGE</div>
    </ons-carousel-item>
    <ons-carousel-cover>
      <div class="cover-label">Swipe left or right</div>
    </ons-carousel-cover>
  </ons-carousel>
</ons-page>

</body>
</html>

温泉转盘 - 在中心显示当前项目

Onsen Carousel - Show Current Item In Centre

layout

carousel

onsen-ui