تصف هذه المقالة أساليب تنفيذ التمرير والتخفيف بالقصور الذاتي لتطوير الهاتف المحمول JS+HTML5. شاركه للرجوع إليه ، على النحو التالي:
1. قم بتمرير طرق التنفيذ الثلاثة التالية:
1) استخدم سمة CSS الأصلية في التدفق: SCROLL DIV ID = النمط الأصل = الفائض: التمرير ؛ Divid = "محتوى المحتوى" منطقة محتوى /Div /Div إشعار: هناك خطأ في Android ، وسوف يعود إلى منطقة المحتوى العليا بعد التمرير. الحل هو استخدام الطريقتين الأخيرتين لتنفيذها.
2) فكرة تنفيذ برمجة JS: قارن تغييرات الموضع في الأمام والخلف للأصابع على الشاشة لتغيير محتوى عنصر المحتوى
1. التمرير
فيما يلي ثلاث طرق تنفيذ:
1) استخدم سمة CSS الأصلية في التدفق: SCROLL
<div id = "parent" style = "overflow: scroll ؛> <div id = 'content'> منطقة المحتوى </div> </viv>
يلاحظ:
هناك خطأ في Android ، وبعد التمرير ، سوف يعود إلى منطقة المحتوى العلوي. الحل هو استخدام الطريقتين الأخيرتين لتنفيذها
2) تنفيذ برمجة JS
الفكرة: قارن موضع عنصر المحتوى قبل وبعد تحرك الإصبع على الشاشة
الخطوة 1: اضبط تدفق الأصل على مخفي ، وقم بتعيين موضع المحتوى على النسبية ، وأعلى إلى 0 ؛
الخطوة 2: استمع إلى أحداث اللمس
var parent = document.getElementById ('parent') ؛ parent.addeventListener ('touchstart' ، function (e) {// do touchstart}) ؛ parent.addeventListener ('touchmove' ، function (e) {// do touchmove}) ؛ touchend}) ؛ parent.addeventListener ('touchend' ، function (e) {// do touchend}) ؛الخطوة 3: تنفيذ رمز التمرير
/*** يتم تطبيق التمرير الرأسي فقط هنا*/var parent = document.getElementById ('parent') ؛ var content = document.getElementById ('content') var starty = 0 ؛ // الموضع الأولي var lasty = 0 ؛ // Last Position Parent.AdDeventListener ('touchstart' ، function (e) {lasty = starty = e.touches [0] .pagey ؛}) ؛ parent.addeventListener ('touchmove' ، function (e) {var nowy = '') content.style.top.replace ('px' ، '') ؛الخطوة 4: التحسين
يتم تشغيل الرمز أعلاه على الهاتف المحمول ولديه الكثير من النتائج المعلقة.
من أجل التحسين ، يرجى الاطلاع على:
3) استخدام إطار isCroll4
var scroll = new isCroll ('parent' ، {hscrollbar: false ، vscrollbar: true ، checkdomchanges: true}) ؛موقع إطار عمل رسمي: http://cubiq.org/iscroll-4
2. تخفيف القصور الذاتي
الفكرة: خذ متوسط السرعة v للأصابع التي تنتشر على الشاشة خلال الفترة الأخيرة من الزمن ، واترك v تتغير وفقًا لوظيفة تناقص حتى لا يمكن تحركها أو v <= 0
/*** يتم تطبيق التمرير الرأسي فقط هنا*/var parent = document.getElementById ('parent') ؛ var content = document.getElementById ('content') var starty = 0 ؛ // الموضع الأولي var lasty = 0 ؛ // الموضع الأخير/*** متغير لتخفيف*/var lastMovetime = 0 ؛ var lastMovestart = 0 ؛ var stopInertiamove = false ؛ // ما إذا كان يجب التوقف عن تخفيف parent.adDeventListener ('touchstart' ، الدالة (e) {lasty = starty = e.touches [0] .pagey ؛/ *** code code*/ lastMovestart = lasty ؛ lastMovEtime = E.Timestamp || nowy = e.toughs [0]. Date.Now () ؛ content.style.top.replace ('px' ، ') LastMovetime) ؛ إذا كانت (e.timestamp) (e.timestamp setTimeout (inertiamove ، 10) ؛ملاحظة: فيما يلي بعض أدوات تنسيق الكود والتجميل لك. أعتقد أنك ستستخدمها في عملية التنمية المستقبلية:
أدوات تجميل وتنسيق كود JavaScript عبر الإنترنت:
http://tools.vevb.com/code/js
أدوات ضغط/تنسيق/تشفير JavaScript:
http://tools.vevb.com/code/jscompress
رمز JSON عبر الإنترنت تنسيق/تجميل/ضغط/تحرير/تحويل أدوات:
http://tools.vevb.com/code/jsoncodeformat
التحقق من رمز JSON عبر الإنترنت أدوات التفتيش والتفتيش والتجميل والتنسيق:
http://tools.vevb.com/code/json
لمزيد من المعلومات حول jQuery ، يرجى زيارة الموضوعات الخاصة لهذا الموقع: "ملخص المكونات المشتركة واستخدامات jQuery" ، "ملخص استخدام Ajax في jQuery" ، "ملخص لمهارات تشغيل الجدول (الجدول) ،" ملخص "التخصيص المفرد". الاستخدامات "و" ملخص استخدامات محدد jQuery "
آمل أن تكون هذه المقالة مفيدة لبرمجة jQuery للجميع.