我在跨平台项目中使用离子“范围”输入.
对于 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>
