لقد كتبت مقياسًا منزلقًا لاستخدامه على محطة الهاتف المحمول، وقد رأيته في التطبيق الأصلي من قبل وكان مفصلاً للغاية ويتم تنفيذه الآن على صفحة الويب.
تأثير التنفيذ كما يلي: (انظر الكود المصدري في نهاية المقالة)
مغلفة في MeasureRuler.js القابلة للاستخدام مباشرة
طريقة الاتصال:
// تهيئة المسطرة var MeasureRuler =new MeasureRuler({ WrapperId:rulerWrapper, // معرف الحاوية، فقط اكتب DIV على الصفحة (مطلوب) max:2000, // الحد الأقصى لمقياس المقياس (غير مطلوب، الافتراضي هو 2000) minUnit: 1, // الحد الأدنى لمقياس المقياس (اختياري، الافتراضي هو 1) UnitSet:10, // طول وحدة المقياس (اختياري، الافتراضي هو 10) value:5, // قيمة التهيئة (اختيارية، الافتراضي هو 1) multi:1، // قيمة المقياس متعددة، الافتراضي هو الحد الأدنى لقيمة المقياس هو 10 بكسل، إذا تم تعيين multi على 3، فإن الحد الأدنى للمقياس هو 30 بكسل (اختياري، الافتراضي هو 1) ) رد الاتصال: RulerSetValue // وظيفة رد الاتصال أثناء انزلاق المسطرة (غير مطلوبة) })تعيين قيمة للمقياس
// قم بتعيين قيمة المقياس إلى 3 MeasureRuler.setValue(3)
قم بتبديل حالة المقياس لتلبية نطاقات القياس المختلفة وإعادة رسم المقياس
// إعادة تعيين المعلمات الجديدة var nParam={ max:5, minUnit:0.5,uniSetSet:2, mult:3, value:1.5 } // إعادة رسم الرسم البياني MeasureRuler.reDrawRuler(nParam);مشاركة كود مصدر GitHub: (إذا وجدت أنه مفيد، فتذكر أن تمنحه نجمة)
https://github.com/xingxiaoyiyio/h5-ruler/tree/master
ملاحظة: هناك مشكلةيستخدم المكون أحداث اللمس لالتقاط النطاق المنزلق، ولكن عندما يكون الحد الأدنى للمقياس هو 1، أي أن كل مقياس يبلغ 10 بكسل، فإن انزلاق النطاق الصغير ليس دقيقًا، وتحتاج إلى التمرير ذهابًا وإيابًا بعناية قبل أن تتمكن من الانزلاق إلى نقطة المقياس التي تنزلق إليها؛
تلخيصما ورد أعلاه هو ملف js الذي قدمه المحرر لتنفيذ وظيفة المقياس المنزلق بالإصبع على صفحة H5 على الهاتف المحمول، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك وقت. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!