ionischer Bereich kann nicht auf ios klicken

Question

Ich verwende ionische "Bereich" Eingabe in einem Cross-Plattform-Projekt. Für Android und PC-Browser, wenn ich auf den Bereich neben dem Slider-Knoten klicken, springt der Slider-Knoten zu dem Punkt, auf den ich klicke und der Wert wird aktualisiert.

Aber für IOS, wenn ich auf den Bereich vom Slider-Knoten klicken, keine Wertänderung geschieht. Und das macht meinen Slider auch schwierig zu klicken, ich muss sehr genau auf den Slider-Knoten klicken, sonst rutscht der Slider nicht. Irgendeine Idee?

Answer 1

Ich glaube, ich habe eine Lösung dafür gefunden. Add-On-Tap(), um Ihr Element etwa so:

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

Dann ist diese in Ihrem Controller hinzuzufügen (oder fühlen Sie sich frei, eine Richtlinie aus ihm zu machen)

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

Wesentlichen, was Sie tun, ist Berechnen der Position des Abgriffs relativ zum Bildschirm und anschließendes Anpassen des Werts für die Arbeit mit dem Schieberegler, um den tatsächlichen Eingabewert zu erhalten, den hätte. Dann aktualisieren Sie das Modell.

EDIT: Dies funktioniert nur mit Click/Tap-Ereignis. Um es flüssiger und natürlicher zu machen, müssen wir auch Swipe/Drag auf Slider-Spuren aktivieren. Eine sehr einfache Lösung ermöglicht es den Entwicklern, dies zu tun. Fügen Sie einfach on-drag = "onTap ($ event)" hinzu, damit Ihr HTML so aussieht.