Onsen-ui, сочетающий карусель с вводом диапазона и слушателями/методами действий

Вот код, который решает проблему в вопросе. Это комбинация двух других ответов, поэтому я не могу взять на себя всю ответственность за это.

Код в 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, она вызовет функцию, иначе ничего не произойдет.

Функция просто добавляет прослушиватели действий к элементу «диапазон». Первый прослушиватель действий срабатывает, когда пользователь касается элемента диапазона, и переключает атрибут scrollable на «false». Как только пользователь отпускает элемент диапазона, срабатывает второй прослушиватель действий. Второй прослушиватель действий устанавливает для атрибута scrollable значение «true».

Причина, по которой вы не можете просто добавить прослушиватели действий «touchStart» и «touchEnd» к элементу диапазона, заключается в структуре onsen. Это не позволяет вам запускать сценарии из <ons-page> (по крайней мере, это то, что я испытал). Вы можете запустить код для добавления прослушивателей действий в index.html, но это не сработает, поскольку «диапазон» Элемент создается только тогда, когда карусель достигает индекса 1, поэтому слушателям действий пока не к чему привязываться. Вот почему вам сначала нужно поместить прослушиватель действий на <ons-carousel>, чтобы проверить, когда индекс 1 активен. Когда он активен, будет создан элемент диапазона, и к нему можно будет привязать прослушиватели действий.

Кредит @AndiPavlio и @FranDios

Если вы хотите иметь возможность использовать элемент 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 будет удален до тех пор, пока действие касания не закончится. Это позволит вам работать с обеими функциями.

Надеюсь, поможет!

Есть ли причина, по которой вы используете карусель для отображения информации о странице/форме вместо навигатора? Обычно это более удобно для такого рода вариантов использования.

В любом случае, для Onsen UI 1.x вы хотите сделать следующее:

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

Надеюсь, поможет!

Для Onsen UI 2.x вы должны слушать «postchange», а не «ons-carousel: postchange».

Вот так:

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