Onsen-ui 将轮播与范围输入和动作侦听器/方法相结合

Question

我有一个 onsen-ui 项目，我正在使用 Monaca Cloud IDE 来构建它。在谈到 onsen-ui 时，我仍在为一些关键概念苦苦挣扎，但我无法通过准备文档来弄清楚。

目前我正在尝试在温泉轮播项目上实现“范围”输入。范围输入渲染得很好，但我不能滑动它。当我尝试滑动它时，我实际上滚动了旋转木马。我目前解决这个问题的想法是将整个轮播设置为“禁用”，因为用户滚动回上一页并不是那么重要（尽管那会很好）。我最大的问题之一是动作监听器以及如何调用与 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>

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

我该怎么做？如果有更好的方法来解决这个问题，请随时分享。

提前致谢！

Answer 1

这是解决问题的代码。它是给出的其他两个答案的组合，所以我不能把所有功劳归于这一点。

index.html 中的代码：

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

上面代码中调用的函数如下：（注意：在我的项目中，这段代码是在一个外部的.js文件中，该文件是在index.html中加载的）

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", "");
      });
    });
  }

代码解释：

代码的第一个 sn-p 是在 <ons-carousel> 中添加一个动作监听器，它监听任何更改，如果发生更改，它会测试轮播的活动索引是否为 1。索引 1 是显示范围元素的索引（在我的应用程序中）。如果轮播在索引 1 上，它将调用该函数，否则不会发生任何事情。

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

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

感谢@AndiPavlio 和@FranDios

Answer 2

如果您希望能够使用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 属性将被删除，直到触摸动作结束。这将允许您同时使用这两种功能。

希望对你有帮助！

Answer 3

您使用轮播而不是导航器来显示页面/表单信息是否有原因？这种用例通常更方便。

无论如何，对于 Onsen UI 1.x，您想要做的是这样的：

document.addEventListener('ons-carousel:postchange', function(event){
  if (event.activeIndex === 1) { // Second item
    event.carousel.setSwipeable(false);
  }
});

希望对你有帮助！

Answer 4

对于 Onsen UI 2.x，您应该听“postchange”而不是“ons-carousel:postchange”。

像这样：

document.addEventListener('postchange', function(event){
  // Handle the event
});