Question

使用混合移动应用，遇到了这个问题。

我正在向左侧菜单添加新项目，其中一个新组件是年龄编号（最小值：18，最大值：65）微调器。搜索网络和Ionic文档，但没有找到任何与之类似的组件。

现在我只将标签作为数字输入字段，仅作为占位符。

<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更新链接）

离子 - 年龄数旋转器组件

1 个答案: