Onsen-ui组合转盘与范围输入&动作监听器/方法 [英] Onsen-ui combining carousel with range input & action listeners/methods

问题描述

我有一个onsen-ui项目，我使用Monaca Cloud IDE来构建它。我对onsen-ui仍然在努力学习一些关键的概念，但我不能从准备文档中解决它。

I have a onsen-ui project and I'm using Monaca Cloud IDE to build it. I'm still struggling with a few key concepts when it comes to onsen-ui, but I can't figure it out from readying the docs.

试图在温度旋转木马项目上实现范围输入。范围输入渲染正好，但我不能滑动它。当我试图滑动它，我实际上滚动旋转木马。我目前的想法是解决这个问题是将整个轮播设置为禁用，因为它不是那么重要的用户滚动到上一页（虽然那将是很好）。我最大的问题之一是动作监听器和如何调用与ons- ..组件有关的方法。

At the moment I'm trying to implement a "range" input on a onsen carousel-item. The range input is rendered just fine, but I can't slide it. When I try to slide it, I actually scroll the carousel. My current idea to solve this problem is to set the entire carousel to "disabled", since it's not that important for the user to scroll back to the previous page (although that would be nice). One of my biggest issues is the action listeners and how to call methods pertaining to ons-.. components.

<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>

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

So basically what I'm thinking about doing here is to set the carousel to "disabled" when the user swipes to the second carousel item.

我如何做到这一点？如果有更好的方法来解决这个问题，请随时分享。

How do I do this? If there's a better way to solve the issue, please feel free to share.

提前感谢！

推荐答案

这里是解决问题中的问题的代码。

Here is the code that solves the issue in the question. It is a combination of the other two answers given, so I can't take all the credit for this.

index.html中的代码：

Code in index.html:

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

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

Function called in above code are as follows:(Note: In my project, this code is in an external .js file which is loaded in 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上，它将调用该函数，否则不会发生。

The first snippet of code is where you add an action listener to the <ons-carousel> This listens for any changes, and if a change occurs, it tests to see whether or not the active index of the carousel is 1. Index 1 is the index on which the range element is displayed (in my application). If the carousel is on index 1, it will call the function, otherwise nothing will happen.

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

The function is simply adding action listeners to the "range" element. The first action listener fires when a user touches the range element, and switches the scrollable attribute to "false". As soon as the user releases the range element, the second action listener fires. The second action listener sets the scrollable attribute back to "true".

您无法简单地将touchStart和touchEnd range元素是因为onsen框架。它不允许你从< ons-page> （至少这是我经历过的）运行脚本。您可以运行代码来添加操作list.html在index.html中，但它不会工作，因为range元素只有在轮播到达索引1时才被创建，因此动作侦听器还没有绑定到。这就是为什么你首先必须在< ons-carousel> 上放置一个动作监听器来检查索引1是否有效。当它处于活动状态时，将创建范围元素，并将操作监听器绑定到它。

The reason why you can't simply add the "touchStart" and "touchEnd" action listeners to the range element is because of the onsen framework. It doesn't allow you to run scripts from within <ons-page> (at least that's what I've experienced.) You can run the code to add the action listeners in index.html, but it won't work, since the "range" element only gets created when the carousel reaches index 1, thus the action listeners have nothing to bind to yet. That is why you first have to put an action listener on the <ons-carousel> to check when index 1 is active. When it is active, the range element will be created, and the action listeners can be bound to it.

输入@AndiPavlio和@FranDios

Credit to @AndiPavlio and @FranDios

这篇关于Onsen-ui组合转盘与范围输入&动作监听器/方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！