Блог

Главная - Вопросы по программированию - Мобильный, Как Средство Выбора Времени Для React Web

Мобильный, Как Средство Выбора Времени Для React Web

#javascript #reactjs #react-dom

Вопрос:

Демонстрация средства выбора времени

Я пытаюсь создать пользовательский интерфейс будильника с помощью react, и я застрял в этом компоненте, где пользователи могут прокручивать или прокручивать часы, минуты и т.д.. Я попробовал некоторые методы, но потерпел неудачу.

Я попробовал прокрутку, колесо, но моя проблема в том, что я просто не могу получить точное значение, которое видит пользователь(например, 03:30 вечера). Я не хочу, чтобы вы помогали мне с кодом, просто мне нужно знать, как к этому подойти.

Комментарии:

1. ваша проблема в том, что вы не можете остановить прокрутку при точном значении, останавливается ли она где-то посередине?

2. @KartikMalik Нет, братан, на самом деле, я не могу понять, как это реализовать.

3. @KartikMalik Некоторые из вариантов, которые я пробовал, были следующими: 1. Я использовал divs для рендеринга каждый час, и когда пользователь прокручивал, я использовал внутренний html. 2. Нажмите один раз, чтобы получить значение. Но на самом деле я хочу, чтобы вы могли прокручивать, и всякий раз, когда они останавливают прокрутку, я должен получить это конкретное состояние.

4. Ладно, я понял твою проблему. Я постараюсь рассмотреть решение в разделе ответов ниже, можете ли вы также поделиться своим техническим стеком. Это ванильный JS или вы используете что-то вроде React?

5. @KartikMalik Это братан

Ответ №1:

Я бы подошел к этой проблеме так

давайте решим эти проблемы здесь

  1. Прокрутка только до нужных точек
  2. Циклическая прокрутка
  3. Автоматический выбор значения — без нажатия в основном.

Прокрутка только до нужных точек

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

Циклическая прокрутка

Вам нужно справиться с этим, используя базовую логику JS, вы можете предоставить некоторые дополнительные буферные элементы в конце и в начале см. этот пример

https://codepen.io/lemmin/pen/bqNBpK

 window.onscroll = function () {
  // Horizontal Scroll.
  var y = document.body.getBoundingClientRect().top;
  page.scrollLeft = -y;
  
  // Looping Scroll.
  var diff = window.scrollY - dummy_x;
  if (diff > 0) {
    window.scrollTo(0, diff);
  }
  else if (window.scrollY == 0) {
    window.scrollTo(0, dummy_x);
  }
}

Автоматический выбор значения

один очень простой подход может заключаться в том, что вы можете получить смещение прокрутки при изменении прокрутки, и, поскольку у вас есть высота каждого объекта, вы можете получить элемент, который находится в фокусе(или выделен для пользователя).

Ниже приведен еще один подход, вы можете создать div селектора, затем вы можете проверить перекрытие при остановке прокрутки, какой бы элемент ни находился в этом div, вы можете получить его значение.

подход 2 рефренс

лично я думаю, что первый подход будет проще и стабильнее. Я видел людей, использующих оба типа подходов.

дайте мне знать, если сможете помочь с чем-нибудь еще.

Метки: ,