Question

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

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

Answer 1

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

    <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 =＆＃34; onTap（$ event）＆＃34;所以你的HTML看起来像这样。

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

Answer 2

我找到了另一个使它也可以工作的选项，但是使用了（ionBlur）。

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

离子范围无法点击ios

2 个答案: