js mengimplementasikan fungsi skala geser jari pada halaman H5 seluler

Saya menulis skala geser untuk digunakan pada terminal seluler. Saya pernah melihatnya di Aplikasi asli dan sekarang sangat detail.

Efek implementasinya adalah sebagai berikut: (Lihat kode sumber di akhir artikel)

Dienkapsulasi menjadi MeasureRuler.js yang dapat digunakan langsung

Metode panggilan:

 //Inisialisasi penggaris var gaugeRuler =new MeasureRuler({ wrapperId:rulerWrapper, //Container ID, cukup tulis DIV di halaman (wajib) max:2000, //Skala maksimum skala (tidak wajib, defaultnya adalah 2000) minUnit: 1, //Skala minimum skala (opsional, defaultnya adalah 1) unitSet:10, //Panjang satuan skala (opsional, defaultnya adalah 10) nilai:5, //Nilai inisialisasi (opsional, default adalah 1) mult:1, //Nilai skala kelipatan, default adalah nilai skala minimum 10px, jika mult diatur ke 3, skala minimum adalah 30px (opsional, default adalah 1 ) callback: ruleSetValue //Fungsi panggilan balik selama menggeser penggaris (tidak wajib) })

Tetapkan nilai pada skala

 //Tetapkan nilai skala ke 3 sizeRuler.setValue(3)

Ganti status skala untuk memenuhi rentang pengukuran yang berbeda dan gambar ulang skalanya

 //Reset parameter baru var nParam={ max:5, minUnit:0.5, unitSet:2, mult:3, value:1.5 } //Gambar ulang grafik sizeRuler.reDrawRuler(nParam);

Berbagi kode sumber GitHub: (Jika menurut Anda berguna, ingatlah untuk memberi bintang)

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

Komponen ini menggunakan peristiwa sentuh untuk menangkap rentang geser, namun jika skala minimumnya adalah 1, yaitu setiap skala berukuran 10 piksel, rentang geser kecil tersebut tidak akurat, dan Anda perlu menggeser maju mundur dengan hati-hati sebelum dapat menggeser ke titik skala tempat Anda menggeser;

Di atas adalah js yang diperkenalkan oleh editor untuk mengimplementasikan fungsi skala geser jari pada halaman ponsel H5. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!