Onsen UIのcarouselでアクティブなitemのみにpull-hookを表示したい

Question

Onsen UIのcarouselにpull-hookを実装したいのですが、
下記コードのようにitemの両方にpull-hookを書くと、上手く動作しません。

getActiveIndex()をつかってactiveな方にだけ、pull-hookのコードが表示されるようにすればいいのかなと思うのですが、
javascriptの書き方がわからずです。どのように記載すればよろしいでしょうか？
何卒宜しくお願い致します。

<ons-page>
　<ons-carousel id="carousel">
　 <ons-carousel-item id="A">
　  <ons-pull-hook id="pull-hook">
 　  Pull to refresh
　  </ons-pull-hook>
　   test
　 </ons-carousel-item>
　 <ons-carousel-item id="B">
　  <ons-pull-hook id="pull-hook">
 　  Pull to refresh
 　 </ons-pull-hook>
  　 test
　 </ons-carousel-item>
　</ons-carousel>
</ons-page>

Comments

[mai1210]

JSとCSSも追記可能ですか？

[treevillage]

ご返信ありがとうございます！
追記可能です。コードには記載していませんでしたがカルーセルの外側に要素を置いており、見え方が崩れてしまいました。カルーセルアイテム内のAのほうだけにプルフックを置いたときは、理想的な動きをしたので、質問した内容で解決できないか検討した次第です。よろしくお願いします。

[mai1210]

そうしましたら、カルーセルの外側の要素を含めて追記いただく方が良いかもしれません。
よろしくお願いいたします！

[treevillage]

ありがとうございます！試してみます。

Answer 1

公式の実例 を見る限りだと、
プルフックはプルフックとして画面上部に入れ
その下にカルーセルを配置、で良いのではないでしょうか？

公式の実例を組み合わせただけですが、以下の内容でカルーセル、プルフック共に動きました。スワイプ操作が競合してしまう、というのも無さそうです。

<ons-page>

  <ons-pull-hook id="pull-hook">
    Pull to refresh
  </ons-pull-hook>

  <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
    <ons-carousel-item style="background-color: gray;">
      <div class="item-label" id="A">A</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #085078;">
      <div class="item-label" id="B">B</div>
    </ons-carousel-item>
    <ons-carousel-cover>
      <div class="cover-label">Swipe left or right</div>
    </ons-carousel-cover>
  </ons-carousel>

</ons-page>

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

ons.ready(function() {
  var pullHook = document.getElementById('pull-hook');

  pullHook.addEventListener('changestate', function(event) {
    var message = '';

    switch (event.state) {
      case 'initial':
        message = 'Pull to refresh';
        break;
      case 'preaction':
        message = 'Release';
        break;
      case 'action':
        message = 'Loading...';
        break;
    }

    pullHook.innerHTML = message;
  });

  pullHook.onAction = function(done) {
    setTimeout(done, 1000);
  };
});

Comments

[treevillage]

ありがとうございます。
試してみましたが、
<ons-carousel>の外側におくとうまく動作しませんでした…。