js implementiert die Fingergleitskalenfunktion auf der mobilen H5-Seite

Ich habe eine Gleitskala für die Verwendung auf dem mobilen Endgerät geschrieben und sie ist jetzt sehr detailliert auf der Webseite implementiert.

Der Implementierungseffekt ist wie folgt: (Siehe den Quellcode am Ende des Artikels)

Eingekapselt in direkt nutzbare MeasureRuler.js

Aufrufmethode:

 //Initialisieren Sie das Lineal var MeasureRuler =new MeasureRuler({ wrapperId:rulerWrapper, //Container-ID, schreiben Sie einfach ein DIV auf die Seite (erforderlich) max:2000, //Der maximale Maßstab der Skala (nicht erforderlich, der Standardwert ist 2000) minUnit: 1, //Die minimale Skala der Skala (optional, der Standardwert ist 1) unitSet:10, //Die Länge der Skaleneinheit (optional, der Standardwert ist 10) value:5, //Initialisierungswert (optional, Standard ist 1) mult:1, //Skalierungswert mehrfach, der Standardwert ist der minimale Skalierungswert 10 Pixel, wenn Mult auf 3 gesetzt ist, beträgt der Mindestskalierungswert 30 Pixel (optional, der Standard ist 1). ) Callback: RulerSetValue //Callback-Funktion beim Schieben des Lineals (nicht erforderlich) })

Weisen Sie der Skala einen Wert zu

 //Skalenwert 3 zuweisen MeasureRuler.setValue(3)

Ändern Sie den Skalenstatus, um verschiedene Messbereiche abzudecken, und zeichnen Sie die Skala neu

 //Neue Parameter zurücksetzen var nParam={ max:5, minUnit:0.5, unitSet:2, mult:3, value:1.5 } //Das Diagramm neu zeichnen MeasureRuler.reDrawRuler(nParam);

Teilen des GitHub-Quellcodes: (Wenn Sie es nützlich finden, denken Sie daran, ihm einen Stern zu geben)

https://github.com/xingxiaoyiyio/h5-ruler/tree/master

Die Komponente verwendet Berührungsereignisse, um den Gleitbereich zu erfassen. Wenn der Mindestmaßstab jedoch 1 beträgt, d Skalierungspunkt, zu dem Sie gleiten;

Das Obige ist der vom Herausgeber eingeführte js, um die Fingergleitskalenfunktion auf der mobilen H5-Seite zu implementieren. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen antworten Zeit. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!