离子范围无法点击ios [英] ionic range cannot click on ios

问题描述

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

I am using ionic "range" input in a cross platform project. For android and PC browser, if I click on the area away from the slider node, the slider node will jump to the point I click and the value will be updated.

但对于IOS，当我单击滑块节点以外的区域时，不会发生任何值更改。这也使我的滑块难以点击，我需要在滑块节点上单击非常准确，否则滑块不会滑动。
有什么想法吗？

But for IOS, when I click the area away from the slider node, no value change is happening. And this also make my slider difficult to click, I need to click very accurate right on the slider node, else the slider will not slide. Any idea?

推荐答案

我相信我找到了解决方法。像这样在你的元素上添加点击（）：

I believe I have found a solution for this. Add on-tap() to your element like so:

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

然后在你的控制器中添加它（或随意发出指令）

Then add this in your controller (or feel free to make a directive out of it)

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

基本上你正在做的是计算水龙头相对于屏幕的位置，然后调整使用滑块的值，以获得它 的实际输入值。然后你更新模型。

Essentially what you are doing is calculating the position of the tap relative to the screen, and then adjusting the value to work with the slider, to get the actual input value that it would have been. Then you update the model.

编辑：这只适用于点击/点击事件。为了使其更加平滑和自然，我们还需要在滑块轨道上启用滑动/拖动。非常简单的修复将允许开发人员这样做。只需添加on-drag =onTap（$ event），以便你的html看起来像这样。

This will only work with click/tap event. To make it more smooth and natural, we need to enable swipe/dragging on slider tracks too. Very simple fix will allow devs to do this. Just add on-drag="onTap($event)" so that your html look like this.

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

这篇关于离子范围无法点击ios的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！