كيف إلى: دائري بسيط مع فيو!

أو ، ما تعلمته بناء دائري الخاص.

https://acollectionofatoms.github.io/vue-carousel-example/

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

ستجد أن Vue.js لا يختلف.

لكن!

قبل تثبيت npm بعد-تبعية-أخرى ، أناشدك أن تفكر في الطاقة الموجودة تحت تصرفك نظرًا لوجود مشروع Vue خارج الصندوق.

أدخل…

المجموعة الانتقالية

قد يكون القادمون من React على دراية بمفهوم المجموعة الانتقالية. بدلاً من أن تكون وظيفة إضافية ، فإن مجموعة الانتقال (للأفضل أو الأسوأ) يتم تعبئتها مسبقًا مع Vue وبالفعل تتوفر واجهة برمجة تطبيقات الانتقالات الغنية فورًا بعد تثبيت جديد.

بالنسبة لأولئك غير المألوفين ، تشبه مجموعة الانتقال عنصر مكوّن الانتقال - كلاهما يسمح بتحريك الإزالة والإضافة و (في حالة مجموعة الانتقال) حركة العناصر داخلها.

سنغوص بشكل أعمق في مجموعة النقل خلال دقيقة واحدة ، ولكن أولاً دعنا نقدم ، ونشيد بما يجعل بناء دائريك سهلًا.

الوجه والحرية (من حزمة أخرى)

لذلك ، ما الذي يجعل دائري؟ لديك عنصر كبير (عادةً صورة) ينزلق داخل وخارج التركيز (أو العرض). وببساطة ، فإن الحركة السلسة لعنصر ما إلى موضع آخر هي الجزء الأكثر أهمية. إذا استنشقت حول قسم النقل في مستندات Vue ، فسترى بعض الرسوم المتحركة المقلقة إلى حد ما.

في المستندات ...

قد يبدو هذا السحر ، ولكن تحت الغطاء ، تستخدم Vue تقنية رسوم متحركة بسيطة تسمى FLIP لنقل العناصر من موقعها القديم إلى موقعها الجديد باستخدام التحويلات بشكل سلس.

وهذه هي تذكرتنا إلى أرض واحدة أقل تبعية. توفر تقنية FLIP المدمجة بالفعل الخبز والزبدة مما يجعل الكاروسيل دائريًا!

اخلاء المسؤولية!

قبل أن نبدأ ، أود التأكيد على الكلمة البسيطة في العنوان.

نحن نتحدث العارية - 2D - كاروسيل. واحد سيتم التعرف عليه على الفور من قبل أي مستخدم حالي لشبكة الويب العالمية. ليس مختلفا على الإطلاق لهذا دائري bootstrap وجدت هنا.

لا توجد أجراس وصفارات رائعة ، ونحن لا ننفذ وظائف شريحة اللمس. هذه المقالة فقط الخطوط العريضة الأساس المحتمل لدار دائري.

مع ذلك خارج الطريق ...

ابدء

لبدء تشغيل الأشياء بسرعة ، سنضع رموز الغش الطرفية الخاصة بنا باسم AKA باستخدام أداة سقالات Vue المدعومة رسميًا.

بعد تثبيت CLI ، تصبح النماذج الأولية نسيمًا.

يُعد القالب webpack البسيط مفيدًا بشكل خاص للنماذج الأولية السريعة ، وبالتالي فهو مثالي لتنفيذ الأمور.

بمجرد تشغيلنا ، سنبدأ مع App.vue

App.vue جميلة

لطيف جدا. حسنًا ، دعنا نحذف هذا ونبدأ من جديد.

MHM

وقم بتعديل app.js وفقًا لذلك ...

والآن نحن في بداية جديدة:

صورة لا شيء.

حسنا عظيم.

في ملف Carousel.vue الخاص بنا ، يمكننا أن نرمي بعض العلامات مثل هذا:

وربما أنت الآن قد فعلت ذلك جيدًا.

يحتوي لاعبنا الرئيسي ، مجموعة الانتقال ، على خاصية وسم تتيح لنا تقديمها على شكل div (بدلاً من النطاق الافتراضي). نحن أيضًا نعطيها اسمًا للفئة ، ونضع div بالشريحة داخلها.

باستخدام التوجيه v الموجه على الشريحة ، فإننا ننجز عرض قائمة تفاعلية ونتأكد من تمرير مفتاح: لكل شريحة بحيث يمكن لـ Vue تتبع كل عقدة. لتبسيط الأمور ، ستعرض كل شريحة عنوانها باستخدام {{slide.title}} داخل عنصر h4.

بعد اللحوم والبطاطا ، نلقي بعض الضوابط للحصول على هذا الشيء التمرير.

وهذا هو الأمر بالنسبة للترميز!

و

نحن نعمل بخفة على الجانب