离子范围不能点击ios

本教程将介绍离子范围不能点击ios的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

I am using ionic "range" input in a cross platform project.
For android and PC browser, if I click on the area away from the slider node, the slider node will jump to the point I click and the value will be updated.

But for IOS, when I click the area away from the slider node, no value change is happening. And this also make my slider difficult to click, I need to click very accurate right on the slider node, else the slider will not slide.
Any idea?

解决方案

I believe I have found a solution for this. Add on-tap() to your element like so:

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

Then add this in your controller (or feel free to make a directive out of it)

 $scope.onTap = function(e) {
if(ionic.Platform.isIOS()) {
  $scope.barProgress = (e.target.max / e.target.offsetWidth)*(e.gesture.touches[0].screenX - e.target.offsetLeft);
}
 };

Essentially what you are doing is calculating the position of the tap relative to the screen, and then adjusting the value to work with the slider, to get the actual input value that it have been. Then you update the model.

EDIT: This will only work with click/tap event. To make it more smooth and natural, we need to enable swipe/dragging on slider tracks too. Very simple fix will allow devs to do this. Just add on-drag="onTap($event)" so that your html look like this.

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

好了关于离子范围不能点击ios的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。