我在跨平台项目中使用离子“范围”输入.
对于 Android和PC浏览器,如果我点击滑块节点以外的区域,滑块节点将跳转到我点击的点,值将被更新.
对于 Android和PC浏览器,如果我点击滑块节点以外的区域,滑块节点将跳转到我点击的点,值将被更新.
但对于IOS,当我单击滑块节点以外的区域时,不会发生任何值更改.这也使我的滑块难以点击,我需要在滑块节点上单击非常准确,否则滑块不会滑动.
任何的想法?
解决方法
我相信我找到了解决方案.像这样在你的元素上添加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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。