离子范围无法点击ios

Question

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

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

Answer 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>