4

onsen-ui プロジェクトがあり、Monaca Cloud IDE を使用してビルドしています。onsen-uiに関しては、いくつかの重要な概念にまだ苦労していますが、ドキュメントを準備してもわかりません.

現時点では、温泉カルーセルアイテムに「範囲」入力を実装しようとしています。範囲入力は問題なくレンダリングされますが、スライドできません。スライドさせようとすると、実際にカルーセルをスクロールします。この問題を解決するための私の現在のアイデアは、カルーセル全体を「無効」に設定することです。これは、ユーザーが前のページにスクロールして戻ることはそれほど重要ではないためです (それはいいことですが)。私の最大の問題の 1 つは、アクション リスナーと ons-.. コンポーネントに関連するメソッドを呼び出す方法です。

<ons-page>
  <ons-carousel fullscreen swipeable auto-scroll auto-scroll-ratio ="0.2">
    <ons-carousel-item>
      <img class="custom_logo_top_welcome" src="images/Leaf_PNG.png"/>
      <br />
      <br />
      <br />
      <p class="custom_p_welcome">Start saving today and see the likely value when you retire.</p>
      <div class="custom_bottom_div_welcome"><p class="custom_bottom_p_welcome">Swipe left</p></div>

    </ons-carousel-item>
    <ons-carousel-item >
      <p class="custom_dateOfBirth_p_setup">Please enter your date of birth:</p>
      <div class="custom_datePicker_div_setup"><p>Test Div</p></div>
      <p class="custom_dateOfRetirement_p_setup">What is your expected retirement age?</p>
      <input type="range" class="range custom_range_setup" />

      <div class="custom_bottom_div_setup"><ons-button class="custom_bottom_button_setup" onclick = "navToIndex()">Done</ons-button></div>

    </ons-carousel-item>
  </ons-carousel>
</ons-page>

基本的にここで考えているのは、ユーザーが 2 番目のカルーセル アイテムにスワイプしたときに、カルーセルを「無効」に設定することです。

どうすればいいですか？問題を解決するためのより良い方法がある場合は、お気軽に共有してください。

前もって感謝します！

4

4 に答える 4

4

質問の問題を解決するコードは次のとおりです。これは、与えられた他の2つの回答の組み合わせであるため、これをすべて信用することはできません.

index.html のコード:

document.addEventListener('ons-carousel:postchange', function(event){
  if (event.activeIndex === 1) {
    rangeTouchEvents();
  }
});

上記のコードで呼び出される関数は次のとおりです:(注: 私のプロジェクトでは、このコードは index.html にロードされる外部の .js ファイルにあります)

function rangeTouchEvents()
  {
    ons.ready(function() {
      var range = document.getElementById("range");
      range.addEventListener('touchstart', function () {
        document.querySelector("ons-        carousel").removeAttribute("swipeable");
      });
      range.addEventListener('touchend', function () {
        document.querySelector("ons-carousel").setAttribute("swipeable", "");
      });
    });
  }

コードの説明:

コードの最初のスニペットは、アクション リスナー<ons-carousel>をrange要素が表示されます（私のアプリケーションでは）。カルーセルがインデックス 1 にある場合、関数が呼び出されます。それ以外の場合は何も起こりません。

この関数は、アクション リスナーを「範囲」要素に追加するだけです。最初のアクション リスナーは、ユーザーが range 要素に触れると起動し、scrollable 属性を「false」に切り替えます。ユーザーが range 要素を離すとすぐに、2 番目のアクション リスナーが起動します。2 番目のアクション リスナーは、スクロール可能な属性を「true」に戻します。

「touchStart」と「touchEnd」のアクション リスナーを単純に range 要素に追加できないのは、onsen フレームワークのためです。内部からスクリプトを実行することはできません<ons-page>(少なくとも私が経験したことです)。コードを実行して index.html にアクション リスナーを追加することはできますが、「range」要素がカルーセルがインデックス 1 に達したときにのみ作成されるため、アクション リスナーにはまだ何もバインドされていません。<ons-carousel>そのため、インデックス 1 がアクティブであることを確認するために、最初にアクション リスナーを配置する必要があります。アクティブな場合、range 要素が作成され、アクション リスナーをそれにバインドできます。

@AndiPavlio と @FranDios の功績

于 2015-12-15T10:07:58.513 に答える
3

要素を使用できるようにしたいが、rangeをスワイプできるようにしたい場合は、次のcarouselようにすることができます。

HTML

次のように要素に追加id="range"します。range

<input id="range" style="position: absolute; top: 300px" type="range" class="range custom_range_setup" /></div>

JS

ons.ready(function() {
  var range = document.getElementById("range");
  range.addEventListener('touchstart', function () {
    document.querySelector("ons-carousel").removeAttribute("swipeable");
  });
  range.addEventListener('touchend', function () {
    document.querySelector("ons-carousel").setAttribute("swipeable", "");
  });
});

range要素に触れるとcarousel swipeable、タッチ操作が終了するまで属性が削除されます。これにより、両方の機能を機能させることができます。

それが役に立てば幸い！

于 2015-12-11T03:39:24.257 に答える