离子范围不能点击ios

Posted 2023-02-23

【中文标题】离子范围不能点击ios

【英文标题】：ionic range cannot click on ios

【发布时间】：2014-11-10 13:44:42

【问题描述】：

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

但对于 ios，当我单击远离滑块节点的区域时，值不会发生变化。这也让我的滑块很难点击，我需要在滑块节点上非常准确地点击，否则滑块不会滑动。 有什么想法吗？

【问题讨论】：

iOS 界面通常不会使用任何传统的侧边或底部滑块进行页面滚动，那么我们所说的究竟是哪种滑块呢？

我说的是“范围”类型的离子输入 例如：ionicframework.com/docs/components/#range

我在浏览器中也发现了同样的问题。如果我使用 iPad safari 来玩上面的示例，单击远离滑块的区域将不起作用。通过它在我的 Mac Safari 中工作。

我在移动浏览器上遇到过类似的问题。我使用 noUiSlider 解决了这个问题，为我在移动设备上工作。

noUISlider 不适用于角离子

【参考方案1】：

我相信我已经找到了解决方案。像这样将 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);
      
    ;

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

编辑：这仅适用于点击/点击事件。为了使其更加流畅和自然，我们还需要在滑块轨道上启用滑动/拖动。非常简单的修复将允许开发人员执行此操作。只需添加 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>

【讨论】：

强烈推荐这个答案。在滑块轨道上拖动仍然无法正常工作，但确实是个好主意。

谢谢，也许可以检测到点击和拖动之间的区别。如果是拖动事件，则不要更新 $scope.barProgress。

添加 on-drag="onTap($event)" 怎么样？它对我来说效果很好。

@devmaniac 我要提出的一点是 onTap 函数 not 需要在 on-drag 事件上运行。它肯定会进行不必要的计算吗？简单地说，我们需要阻止 onTap() 在它被拖动时运行

@CarbonDry，当用户点击滑块轨道时，你真的确定拖动工作吗？我们可以只使用 on-drag 处理程序来获取点击事件吗？

【参考方案2】：

我也找到了另一个选项，但使用 (ionBlur)。

<ion-range min=“0” max=“100” #seeker (ionBlur)=“positionPress($event, seeker.value)” [(ngModel)]=“positionbar”>