cordova – Onsen-ui将旋转木马与范围输入和动作听众/方法相结合

我有一个onsen-ui项目,我正在使用Monaca Cloud IDE来构建它.当涉及到onsen-ui时,我仍然在努力解决一些关键概念,但我无法从准备文档中弄清楚这一点.

目前我正试图在onsen carousel-item上实现“范围”输入.范围输入渲染得很好,但我无法滑动它.当我试图滑动它时,我实际上滚动了旋转木马.我目前解决这个问题的想法是将整个轮播设置为“禁用”,因为用户滚动回到上一页并不重要(尽管那会很好).我最大的问题之一是动作侦听器以及如何调用与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>

所以基本上我在这里想做的是当用户滑动到第二个轮播项目时将轮播设置为“禁用”.

我该怎么做呢？如果有更好的方法来解决问题,请随时分享.

提前致谢！

这是解决问题中的问题的代码.这是给出的其他两个答案的组合,所以我不能为此付出全部的功劳.

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>添加动作侦听器的地方.这会侦听任何更改,如果发生更改,它会测试轮播的活动索引是否为1.索引1是显示范围元素的索引(在我的应用程序中).如果轮播在索引1上,它将调用该函数,否则不会发生任何事情.

该函数只是将动作侦听器添加到“range”元素.当用户触摸范围元素时,第一个动作侦听器将触发,并将可滚动属性切换为“false”.一旦用户释放range元素,第二个动作侦听器就会触发.第二个动作侦听器将可滚动属性设置回“true”.

你之所以不能简单地将“touchStart”和“touchEnd”动作监听器添加到range元素是因为onsen框架.它不允许您从< ons-page>内运行脚本(至少那是我所经历过的.)你可以运行代码在index.html中添加动作监听器,但它不起作用,因为只有当轮播到达索引1时才会创建“range”元素,因此动作侦听器还没有任何东西可以绑定.这就是为什么你首先必须在< ons-carousel>上放置动作监听器的原因.检查索引1何时处于活动状态.当它处于活动状态时,将创建range元素,并且可以将动作侦听器绑定到它.

感谢@AndiPavlio和@FranDios