ios 上离子范围无法点击

我在跨平台项目中使用离子“范围”输入。 对于android和PC浏览器，如果我点击远离滑块节点的区域，滑块节点将跳转到我点击的位置，并且值将被更新。

但对于 IOS，当我单击远离滑块节点的区域时，没有发生任何值变化。这也使得我的滑块很难点击，我需要在滑块节点上非常准确地点击，否则滑块将不会滑动。 任何想法？

我相信我已经找到了解决方案。将 on-tap() 添加到您的元素中，如下所示：

    <div class="range">
        <input type="range" on-tap="onTap($event)" ng-model="barProgress" min="0" max="100">
    </div>

然后将其添加到您的控制器中（或者随意从中制定指令）

    $scope.onTap = function(e) {
      if(ionic.Platform.isIOS()) {
        $scope.barProgress = (e.target.max / e.target.offsetWidth)*(e.gesture.touches[0].screenX - e.target.offsetLeft);
      }
    };

本质上，您所做的就是计算点击相对于屏幕的位置，然后调整该值以与滑块一起使用，以获得它的实际输入值would已经。然后更新模型。

EDIT:这仅适用于单击/点击事件。为了使其更加平滑和自然，我们还需要在滑块轨道上启用滑动/拖动。非常简单的修复将允许开发人员做到这一点。只需添加 on-drag="onTap($event)" 即可使您的 html 看起来像这样。

<div class="range">
    <input type="range" on-tap="onTap($event)" on-drag="onTap($event)" ng-model="barProgress" min="0" max="100">
</div>