js implementa a função de escala deslizante de dedo na página móvel H5

Escrevi uma escala móvel para uso no terminal móvel. Já a vi no aplicativo nativo e está muito detalhada. Agora está implementada na página web.

O efeito da implementação é o seguinte: (Veja o código-fonte no final do artigo)

Encapsulado em MeasureRuler.js diretamente utilizável

Método de chamada:

 //Inicialize a régua var MeasureRuler =new MeasureRuler({ wrapperId:rulerWrapper, //ID do contêiner, basta escrever um DIV na página (obrigatório) max:2000, //A escala máxima da escala (não obrigatória, o padrão é 2000) minUnit: 1, //A escala mínima da escala (opcional, o padrão é 1) unitSet:10, //O comprimento da unidade de escala (opcional, o padrão é 10) value:5, //Valor de inicialização (opcional, o padrão é 1) mult:1, //Valor de escala múltiplo, o padrão é o valor mínimo da escala é 10px, se mult estiver definido como 3, a escala mínima é 30px (opcional, o padrão é 1 ) callback: governanteSetValue //Função de retorno de chamada durante régua deslizante (não obrigatório) })

Atribuir um valor à escala

 //Atribuir o valor da escala a 3 MeasureRuler.setValue(3)

Mude o status da escala para atender a diferentes faixas de medição e redesenhe a escala

 //Redefinir novos parâmetros var nParam={ max:5, minUnit:0.5, unitSet:2, mult:3, value:1.5 } //Redesenhar o gráfico MeasureRuler.reDrawRuler(nParam);

Compartilhamento de código-fonte do GitHub: (se você achar útil, lembre-se de dar uma estrela)

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

O componente usa eventos de toque para capturar o intervalo de deslizamento, mas quando a escala mínima é 1, ou seja, cada escala tem 10px, o deslizamento de pequeno intervalo não é preciso e você precisa deslizar para frente e para trás com cuidado antes de poder deslizar para o ponto de escala para o qual você desliza;

O texto acima é o js introduzido pelo editor para implementar a função de escala deslizante do dedo na página móvel H5. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a você. tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!