モバイル端末で使用するためにスライディング スケールを作成しました。これは以前ネイティブ アプリで見たことがありますが、今回は Web ページに実装されました。
実装の効果は次のとおりです (記事の最後にあるソース コードを参照してください)。
直接使用可能な MeasureRuler.js にカプセル化されています
呼び出し方法:
//ルーラーを初期化します varmeasureRuler =new MeasureRuler({ WrapperId:rulerWrapper, //コンテナ ID、ページに DIV を書き込むだけです (必須) max:2000, //スケールの最大スケール (必須ではありません、デフォルトは2000) minUnit: 1, //スケールの最小スケール（オプション、デフォルトは 1）unitSet:10, //スケール単位の長さ（オプション、デフォルトは 10）value:5, //初期化値 (オプション、デフォルトは 1) mult:1, //スケール値の倍数、デフォルトは最小スケール値は 10px、mult が 3 に設定されている場合、最小スケールは 30px (オプション、デフォルトは 1) ) callback:rulerSetValue //スライディングルーラー中のコールバック関数（必須ではありません） })スケールに値を割り当てる
//スケール値を3に代入するmeasureRuler.setValue(3)
さまざまな測定範囲に合わせてスケールのステータスを切り替え、スケールを再描画します
//新しいパラメータをリセットします var nParam={ max:5, minUnit:0.5,unitSet:2, mult:3, value:1.5 } //グラフを再描画しますmeasureRuler.reDrawRuler(nParam);GitHub ソース コード共有: (役立つと思われる場合は、必ずスターを付けてください)
https://github.com/xingxiaoyiyio/h5-ruler/tree/master
注: 問題がありますコンポーネントはタッチ イベントを使用してスライド範囲をキャプチャしますが、最小スケールが 1 の場合、つまり各スケールが 10 ピクセルの場合、狭い範囲のスライドは正確ではないため、スライド範囲にスライドする前に慎重に前後にスライドする必要があります。スライドするスケールポイント。
要約する上記は、モバイル H5 ページに指スライドスケール機能を実装するために編集者が紹介した JS です。ご質問があれば、メッセージを残してください。編集者が返信します。時間。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！