我怎样才能像 ios 一样在 angular 中制作一个时间选择器？

Question

我必须在 angular 中使用 ios 在 angular 中的格式或外观实现时间选择器，但我不知道从哪里开始！

例如：https://i.stack.imgur.com/NNCRv.png

或类似：https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos/scheduling/timepicker-sample-5

Answer 1

how to identify of the 5 that are present the number that is in the middle?

您可以根据 window:scroll 事件计算当前位置，如下所示：

  @HostListener("window:scroll", ['$event'])
  handleHHScroll(event) {
    this.hhValue = this.getValueByPosition(event.target.scrollTop, 'hh');
    this.hhScroll$.next(this.hhValue);
  }

  getValueByPosition(y, type) {
    let arr = type === 'hh' ? this.hhArray : this.mmArray;
    let index = Math.floor((y+17)/33);
    if(index < 0) index = 0;
    if(index >= arr.length) index = arr.length -1;
    return arr[index];
  }

根据当前位置，您可以计算前后部分并将其渲染到 UI

https://github.com/asdftu/ng-time-picker 上已有一个实施，看看是否有帮助。

我怎样才能像 ios 一样在 angular 中制作一个时间选择器？

How can I make a time picker in angular like ios?

angular

user-interface

datetimepicker

timepicker