js implémente la fonction d'échelle mobile sur la page mobile H5

J'ai écrit une échelle mobile à utiliser sur le terminal mobile. Je l'ai déjà vue dans l'application native et elle était maintenant implémentée sur la page Web ;

L'effet d'implémentation est le suivant : (Voir le code source à la fin de l'article)

Encapsulé dans MeasureRuler.js directement utilisable

Méthode d'appel :

 //Initialisez la règle var MeasureRuler =new MeasureRuler({ wrapperId:rulerWrapper, //ID du conteneur, écrivez simplement un DIV sur la page (obligatoire) max:2000, //L'échelle maximale de l'échelle (non obligatoire, la valeur par défaut est 2000) minUnit: 1, //L'échelle minimale de l'échelle (facultatif, la valeur par défaut est 1) unitSet:10, //La longueur de l'unité d'échelle (facultatif, la valeur par défaut est 10) value:5, //Valeur d'initialisation (facultatif, la valeur par défaut est 1) mult:1, //Valeur d'échelle multiple, la valeur par défaut est la valeur d'échelle minimale est de 10 px, si mult est défini sur 3, l'échelle minimale est de 30 px (facultatif, la valeur par défaut est 1 ) rappel : RulerSetValue //Fonction de rappel pendant la règle coulissante (non obligatoire) })

Attribuer une valeur à l'échelle

 //Attribuer la valeur d'échelle à 3 MeasureRuler.setValue(3)

Changez l'état de l'échelle pour répondre à différentes plages de mesure et redessinez l'échelle

 //Réinitialiser les nouveaux paramètres var nParam={ max:5, minUnit:0.5, unitSet:2, mult:3, value:1.5 } //Redessiner le graphique MeasureRuler.reDrawRuler(nParam);

Partage de code source GitHub : (Si vous le trouvez utile, n'oubliez pas de lui donner une étoile)

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

Le composant utilise des événements tactiles pour capturer la plage glissante, mais lorsque l'échelle minimale est de 1, c'est-à-dire que chaque échelle est de 10 px, le glissement de la petite plage n'est pas précis et vous devez glisser d'avant en arrière avec précaution avant de pouvoir glisser vers la plage mobile. point d'échelle vers lequel vous glissez ;

Ce qui précède est le js introduit par l'éditeur pour implémenter la fonction d'échelle coulissante sur la page mobile H5. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra dans. temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !