Ionic - 年龄数字微调器组件

Question

在开发混合移动应用时遇到了这个问题。

我目前正在向左侧菜单添加新项目，其中一个新组件是年龄数字 (min:18, max:65) 微调器。搜索网络和 Ionic 文档，但没有找到任何类似的组件。

Age number spinner

目前我只有标签作为数字输入字段，仅作为占位符。

<div class="match-age">
        <label class="item item-input min-age">
          <input type="number" min="18" max="65">
        </label>
        <label class="item item-input max-age">
          <input type="number" min="18" max="65">
        </label>
      </div>

它看起来像这样：Current design

此子菜单的模板如下所示：

<ion-list ng-if="(menuMatch && !menuMain)" class="slide-right-left">
      <div class="item item-divider main-menu-divider">
        {{ "distance" | translate }}
      </div>
      <div class="item range">
        <input type="range" name="distance" min="0" max="200" value="{{rangeValue}}" ng-model="rangeValue"
               step="10">
        {{ rangeValue }}
      </div>
      <div class="item item-divider main-menu-divider">
        {{ "age" | translate }}
      </div>
      <div class="match-age">
        <label class="item item-input min-age">
          <input type="number" min="18" max="65">
        </label>
        <label class="item item-input max-age">
          <input type="number" min="18" max="65">
        </label>
      </div>
      <div class="item item-divider main-menu-divider">
        {{ "match_with" | translate }}
      </div>
      <div class="match-options">
        <ion-radio class="man-option" ng-model="choice" ng-value="'men'">Men</ion-radio>
        <ion-radio class="woman-option" ng-model="choice" ng-value="'women'">Women</ion-radio>
      </div>

      <div href="" ng-click="saveMatchOptions()">
        <button class="button save-options">
          {{ "save_options_btn" | translate }}
        </button>
      </div>
    </ion-list>

如果框架中没有类似的东西，我可以尝试制作自定义html组件并使用Javascript添加一些功能，并使用CSS设置样式，以创建类似的东西。

Answer 1

不确定这里的问题是什么，但由于我没有找到达到我所追求的生产水平的组件（也没有在 UX 或定制方面），我创建了一个当前在我们的实时移动设备中使用的新指令应用程序。数字选择器/微调器是作为属性指令实现的，因此请坚持使用任何 DOM 元素或您现有的输入字段（只需记住将它们的 css 设置为只读），瞧，解决了一堆令人头疼的问题（输入验证、用户流失、等等。） 该指令的作用与您期望的一样，具有与本机设备一样的拖动功能，具有光滑的外观、高度可定制性和大量附加功能。 看看这个！ http://market.ionicframework.com/plugins/ion-number-picker（链接更新感谢@strttn）