ثلاث طرق لتحقيق الانزلاق في الأيوني

عندما تقتصر محطة الهاتف المحمول على حجم الشاشة وتعرض الكثير من المحتوى ، تحتاج إلى تمرير بعض المناطق. تُظهر هذه المقالة جميع الطرق في المشروع. يمكنك اختيار طريقة الانزلاق المناسبة وفقًا لاحتياجاتك. المبدأ الأساسي للانزلاق هو أن هناك حاويتين A و B. إذا كانت A في الطبقة الخارجية و B في الطبقة الداخلية ؛ إذا كان A في عرض أو ارتفاع الطبقة الخارجية A ثابت ، فيمكن أن يتم لف عرض أو ارتفاع حاوية الطبقة الداخلية B.

طريقة التنفيذ

1). أيون السكر

استخدم الأوامر المنزلقات التي تأتي مع أيوني

 <ion-view view-title = "dashboard"> <ion-content has-rouncing = "false"> <ion-scroll has-standing = "false" direction = "x"> <vip> يدرك ion-scroll الانزلاق ، ويستخدم المكون المنزلق المقدم من أيون لتحقيق الانزلاق. للحصول على خصائص أيون-سكول الأخرى ، يرجى الرجوع إلى وثيقة الموقع الرسمي </div> </ion-scroll> </ion-content> </on-view>

2). فائض CSS

 <ion-view view-title = "dashboard"> <ion-content has-buncing = "false" overflow-scroll = "true"> <viv> استخدم سمة الفائض من css أو التمرير لتنفيذ أو استخدام سمة الفائض من css أو تمريرها للتنفيذ ، استخدم السمة المفرطة في التنفيذ أو التمرير التمرير لتنفيذ التمرير ، استخدم سمة الفائض من CSS أو التمرير لتنفيذ التمرير ، استخدم سمة الفائض من CSS أو التمرير لتنفيذ التمرير ، استخدم سمة الفائض من CSS أو التمرير لتنفيذ التمرير </div> </div> </ion-content> </ion-view

• الفائض: تلقائيًا إذا تم قطع المحتوى ، يعرض المتصفح شريط تمرير لعرض الباقي.

• الفائض: سيتم قطع محتوى التمرير ، لكن المتصفح سيعرض شريط التمرير لعرض الباقي.

ملاحظة: وبهذه الطريقة ، يحتاج أيون إلى إضافة توجيهات زائفة = "صواب" للإشارة إلى أن التمرير الخاص بالنظام يستخدم بدلاً من التمرير الأيوني. يونيك تنفذ مجموعة أساليب التمرير الخاصة بها.

استمع إلى Touch Events

 <div id = "dash_scroll_container"> <div ng-repeat = "d in datas" style = "margin-right: 20px ؛ الحدود: صلبة 1px #ffc900 ؛ الارتفاع: 100 ٪ ؛ العرض: 100px ؛ عرض: inline-block ؛ text-align: center ؛ line-hiigh: 40px ؛"

المقابلة ي

 Angular.Module ('starter.controllers' ، []). وحدة التحكم ('dashctrl' ، الدالة (scope $) {$ scope.datas = [1،2،3،4،5،6،7،8،9،10] ؛ var startx = 0 ، starty = 0 ؛ var $ domscroll = $ ( $ domscroll.on ("touchstart" ، الدالة (e) {startx = e.originalevent.ChangedTouches [0] .pagex ؛ starty = $ domscroll.on ("touchmove" ، الدالة (e) {var x = if (y) math.abs (x)) E.PreventDefault () ؛ E.StopPropagation () ؛

من خلال الاستماع إلى أحداث touchstart و touchmove للإصبع ، يتم الحصول على المسافة المنزلق ، ويتم استدعاء شريط التمرير للحاوية الخارجية للتمرير إلى المسافة المقابلة.

• $ (محدد) .scrollleft (الموضع): اضبط موضع التمرير الأفقي للعنصر

• $ (محدد) .scrolltop (الموضع): اضبط موضع التمرير العمودي للعنصر

أخيرًا ، استخدم أمر AngularJS لتغليف التمرير الاستماع إلى تعليمات واحدة ، وهو مناسب للاستخدام أثناء الانزلاق في المستقبل.

أضف في التوجيه. js:

 angular.module ('starter.directives' ، []). التوجيه ('myscroll' ، function () {رابط الدالة ($ scope ، element ، attrs) {var $ domscroll = $ (element [0]) ؛ var startx = 0 ، starty = 0 ؛ $ domscroll.on ( startx = e.originalevent.ChangedTouches [0] pagex ؛ = E.Originalevent.ChangedTouches [0] .pagex-startx ؛ // slide لأعلى ولأسفل scrolltop ($ (this) ، y) ؛ eStoppropagation () إرجاع {تقييد: 'a' ، link: link} ؛}) ؛

وبهذه الطريقة ، من المريح استخدامها بعد التغليف ، وإضافة تعليمات my-scroll إلى العناصر التي تحتاج إلى انزلاق.

 <div my-scroll style = "الحدود: slateblue solid 1px ؛ العرض: 100 ٪ ؛ الارتفاع: 300px ؛ فائض: hidden ؛ الهامش: 0 ؛ حشوة: 0 ؛ المنطقة {{d}} </div> </viv> <viv> <viv> <div ng-repeat = "d في البيانات" style = "margin-bottom: 20px ؛ الحدود: صلبة 1px #ffc900 ؛ الارتفاع: 80px ؛ text-aliz

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.