离子范围无法点击ios

概述我在跨平台项目中使用离子“范围”输入. 对于 Android和PC浏览器,如果我点击滑块节点以外的区域,滑块节点将跳转到我点击的点,值将被更新. 但对于IOS,当我单击滑块节点以外的区域时,不会发生任何值更改.这也使我的滑块难以点击,我需要在滑块节点上单击非常准确,否则滑块不会滑动. 任何的想法？ 我相信我找到了解决方案.像这样在你的元素上添加on-tap()： <div class="range 我在跨平台项目中使用离子“范围”输入.
对于 Android和PC浏览器,如果我点击滑块节点以外的区域,滑块节点将跳转到我点击的点,值将被更新.

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

解决方法 我相信我找到了解决方案.像这样在你的元素上添加on-tap()：

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

总结

以上是内存溢出为你收集整理的离子范围无法点击ios全部内容，希望文章能够帮你解决离子范围无法点击ios所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。