React Web 的移动式时间选择器

Question

我正在尝试使用 React 制作一个闹钟 UI，但我卡在这个组件上，用户可以滚动或滑动浏览小时、分钟等。我尝试了一些方法但失败了。

我试过滚动，在滚轮上，但我的问题是我无法获得用户看到的准确值（如 03:30 PM）。我不想让你帮我写代码，只需要知道如何处理这个问题。

Answer 1

我会这样处理这个问题

让我们来解决这里的挑战

只滚动到所需的点
循环滚动
自动选择值 - 基本上无需点击。

只滚动到所需的点

这个概念称为快照滚动，您可以使用一些库来避免自己编写逻辑，因为这样您最终会处理很多边缘情况。

循环滚动

你需要使用基本的 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中任何元素的重叠on-scroll-stop，你可以得到它的值。

我个人认为第一种方法会更简单、更稳定。我见过有人使用这两种方法。

让我知道是否有任何其他帮助。

React Web 的移动式时间选择器

Mobile Like Time Picker For React Web

javascript

reactjs

react-dom