4

我有一个 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>

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

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

提前致谢！

4

4 回答 4

4

这是解决问题中问题的代码。这是给出的其他两个答案的组合，所以我不能为此承担所有责任。

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 上，它将调用该函数，否则不会发生任何事情。

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

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

感谢@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 回答
2

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

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

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

希望能帮助到你！

于 2015-12-11T02:27:15.400 回答
0

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

像这样：

document.addEventListener('postchange', function(event){
  // Handle the event
});
于 2017-07-10T22:52:56.220 回答