Onsen-ui 结合旋转木马与范围输入和动作 listeners/methods

Question

我有一个温泉-ui 项目，我正在使用 Monaca Cloud IDE 来开发它ui。关于温泉-ui，我仍在努力解决一些关键概念，但我无法通过准备文档来弄明白。

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

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

我该怎么做？如果有更好的解决方法，欢迎分享。

提前致谢！

Answer 1

您使用轮播而不是导航器来显示 page/form 信息有什么原因吗？这种用例通常更方便。

无论如何，为了温泉UI1.x你想做的是这样的：

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

希望对您有所帮助！

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

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

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

代码解释：

第一段代码是向 <ons-carousel> 添加动作侦听器的地方，它会侦听任何更改，如果发生更改，它会测试轮播的活动索引是否是1. 索引 1 是显示范围元素的索引（在我的应用程序中）。如果轮播在索引 1 上，它将调用该函数，否则什么也不会发生。

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

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

感谢@AndiPavlio 和@FranDios

Answer 4

对于温泉 UI 2.x 你应该听 'postchange' 而不是 'ons-carousel:postchange'。

像这样：

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

Onsen-ui 结合旋转木马与范围输入和动作 listeners/methods

Onsen-ui combining carousel with range input & action listeners/methods

cordova

onsen-ui

monaca