js implementa la función de escala deslizante con los dedos en la página móvil H5

Escribí una escala móvil para usar en el terminal móvil. La he visto antes en la aplicación nativa y está muy detallada. Ahora está implementada en la página web.

El efecto de implementación es el siguiente: (Consulte el código fuente al final del artículo)

Encapsulado en MeasureRuler.js directamente utilizable

Método de llamada:

 //Inicializa la regla var MeasureRuler =new MeasureRuler({ wrapperId:rulerWrapper, //ID del contenedor, solo escribe un DIV en la página (obligatorio) max:2000, //La escala máxima de la escala (no es obligatoria, el valor predeterminado es 2000) minUnit: 1, // La escala mínima de la escala (opcional, el valor predeterminado es 1) unitSet:10, // La longitud de la unidad de escala (opcional, el valor predeterminado es 10) value:5, //Valor de inicialización (opcional, el valor predeterminado es 1) mult:1, //Valor de escala múltiple, el valor de escala mínimo predeterminado es 10 px, si mult se establece en 3, la escala mínima es 30 px (opcional, el valor predeterminado es 1 ) devolución de llamada: ruleSetValue //Función de devolución de llamada durante la regla deslizante (no requerida) })

Asignar un valor a la escala.

 //Asigna el valor de escala a 3 medidaRuler.setValue(3)

Cambie el estado de la escala para cumplir con diferentes rangos de medición y vuelva a dibujar la escala

 //Restablecer nuevos parámetros var nParam={ max:5, minUnit:0.5, unitSet:2, mult:3, value:1.5 } //Volver a dibujar el gráfico medidaRuler.reDrawRuler(nParam);

Compartir código fuente de GitHub: (Si lo encuentra útil, recuerde darle una estrella)

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

El componente utiliza eventos táctiles para capturar el rango de deslizamiento, pero cuando la escala mínima es 1, es decir, cada escala es de 10 px, el deslizamiento de rango pequeño no es preciso y debe deslizarse hacia adelante y hacia atrás con cuidado antes de poder deslizarse hacia el punto de escala al que se desliza;

Lo anterior es el js introducido por el editor para implementar la función de escala deslizante con el dedo en la página móvil H5. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!