كيفية إنشاء واجهات قابلة للتمرير السريع في تطبيق التفاعل باستخدام Swiper

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

Swiper هي مكتبة متعددة الاستخدامات تتيح لك إنشاء واجهات قابلة للتمرير السريع في تطبيقات React الخاصة بك. اكتشف كيف يمكنك إنشاء واجهات قابلة للتمرير السريع في تطبيق React الخاص بك باستخدام Swiper.

تركيب Swiper

Swiper هي إحدى المكتبات العديدة التي يمكنك استخدامها لتخصيص تطبيق React الخاص بك. لبدء استخدام Swiper ، تحتاج إلى تثبيته في تطبيق React الخاص بك. يمكنك القيام بذلك باستخدام الأمر الطرفي التالي الذي يجب تشغيله في الدليل الجذر لمشروعك:

npm تثبيت swiper

بمجرد تثبيت Swiper ، يمكنك استخدامه في تطبيقك.

إنشاء واجهات قابلة للتمرير السريع

بعد تثبيت Swiper في تطبيق React الخاص بك ، يمكنك إنشاء واجهات قابلة للتمرير السريع. ابدأ باستيراد ملف Swiper و SwiperSlide مكونات من مكتبة Swiper.

مكون Swiper هو المكون الأساسي لمكتبة Swiper. يحدد هيكل العناصر القابلة للتمرير السريع وسلوكها ووظائفها. يعد مكون SwiperSlide مكونًا فرعيًا لمكون Swiper. تحدد الشرائح الفردية الموجودة داخل مكون Swiper.

في ما يلي مثال على واجهة قابلة للتمرير السريع باستخدام مكونات Swiper و SwiperSlide:

يستورد تتفاعل من'تتفاعل';
يستورد {Swiper، SwiperSlide} من"swiper / رد فعل";
يستورد"swiper / css";
وظيفةبرنامج() {
يعود (




<شعبةاسم الطبقة='عنصر'>العنصر 1شعبة></SwiperSlide>
<شعبةاسم الطبقة='عنصر'>العنصر 2شعبة></SwiperSlide>
<شعبةاسم الطبقة='عنصر'>العنصر 3شعبة></SwiperSlide>
<شعبةاسم الطبقة='عنصر'>العنصر 4شعبة></SwiperSlide>
 </Swiper>
 </div>
 )
}
يصدّرتقصير برنامج

بالإضافة الى Swiper و SwiperSlide المكونات ، تستورد كتلة التعليمات البرمجية هذه ورقة الأنماط الافتراضية لـ Swiper باستخدام ملف swiper / المغلق وحدة.

يقوم المثال بعد ذلك بلف مكون Swiper حول أربعة مكونات تابعة لـ SwiperSlide. يحتوي كل SwiperSlide على ملف شعبة عنصر مع اسم الطبقة يصف. يمكنك استخدام className لتصميم عناصر div:

.عنصر {
مضمنة الحجم: 100مقصف;
نصف قطر الحد: 12مقصف;
حشوة: 1rem;
لون: #333333;
لون الخلفية: # e2e2e2;
خط العائلة: مخطوطة;
}

تخصيص واجهتك القابلة للتمرير السريع

بعد إنشاء واجهة قابلة للتمرير السريع بنجاح ، يمكنك تحسين مظهرها ووظائفها لتناسب متطلباتك.

باستخدام Swiper ، يمكنك تخصيص سلوك الواجهة ومظهرها باستخدام خيارات متنوعة. تقوم بتمرير هذه الخيارات إلى Swiper مكون مثل الدعائم في React:

يستورد تتفاعل من'تتفاعل';
يستورد {Swiper، SwiperSlide} من"swiper / رد فعل";
يستورد"swiper / css";
وظيفةبرنامج() {
يعود (



 spaceBetween = {30}
 slidesPerView = {2}
 حلقة = { حقيقي }
 >
<شعبةاسم الطبقة='عنصر'>العنصر 1شعبة></SwiperSlide>
<شعبةاسم الطبقة='عنصر'>العنصر 2شعبة></SwiperSlide>
<شعبةاسم الطبقة='عنصر'>العنصر 3شعبة></SwiperSlide>
<شعبةاسم الطبقة='عنصر'>العنصر 4شعبة></SwiperSlide>
 </Swiper>
 </div>
 )
}
يصدّرتقصير برنامج

في هذا المثال ، يأخذ مكوِّن Swiper ثلاث دعائم: الفضاء بين, الشرائح، و حلقة. ال الفضاء بين يحدد prop المسافة بين كل شريحة ، في هذه الحالة 30 بكسل.

باستخدام الشرائح prop ، يمكنك تعيين عدد الشرائح المرئية مرة واحدة. في هذه الحالة ، فإن ملف الشرائح تم ضبط prop على 2 مما تسبب في Swiper مكون لعرض شريحتين في وقت واحد.

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

تكوين واجهاتك القابلة للتمرير السريع مع الوحدات

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

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

على سبيل المثال ، هذه هي الطريقة التي يمكنك بها استخدام ملف ملاحة وحدة لتكوين واجهاتك القابلة للتمرير السريع:

يستورد تتفاعل من"تتفاعل";
يستورد {Swiper، SwiperSlide} من"swiper / رد فعل";
يستورد { ملاحة } من"swiper";
يستورد"swiper / css";
يستورد"swiper / css / navigation";
وظيفةبرنامج() {
يعود (



 spaceBetween = {30}
 slidesPerView = {2}
 الوحدات النمطية = {[التنقل]}
 حلقة = {حقيقي}
 التنقل = {حقيقي}
 >
<شعبةاسم الطبقة="عنصر">العنصر 1شعبة></SwiperSlide>
<شعبةاسم الطبقة="عنصر">العنصر 2شعبة></SwiperSlide>
<شعبةاسم الطبقة="عنصر">العنصر 3شعبة></SwiperSlide>
<شعبةاسم الطبقة="عنصر">العنصر 4شعبة></SwiperSlide>
 </Swiper>
 </div>
 );
}
يصدّرتقصير برنامج؛

تستورد كتلة التعليمات البرمجية هذه ملف ملاحة الوحدة النمطية ونمط CSS الخاص بها ، ثم تحدد الوحدة النمطية في ملف الوحدات دعامة من Swiper عنصر. ال الوحدات تعمل prop على تمكين الوحدات النمطية التي توفرها مكتبة Swiper وتكوينها.

توفر وحدة التنقل وظائف التنقل لمكون Swiper. يضيف أزرار الأسهم السابقة والتالية التي يمكنك النقر فوقها أو الضغط عليها للانتقال إلى الشريحة السابقة أو التالية.

ال ملاحة قيمة prop هي صحيحة مما يؤدي إلى عرض الأزرار السابقة والتالية على الشاشة.

تكوين واجهات قابلة للتمرير السريع باستخدام التشغيل التلقائي

ال تشغيل تلقائي تسمح الوحدة النمطية لشريط التمرير بالانتقال بين الشرائح تلقائيًا دون تدخل المستخدم.

فيما يلي مثال على كيفية تكوين واجهتك القابلة للتمرير السريع باستخدام ملف تشغيل تلقائي وحدة:

يستورد تتفاعل من"تتفاعل";
يستورد {Swiper، SwiperSlide} من"swiper / رد فعل";
يستورد { تشغيل تلقائي } من"swiper";
يستورد"swiper / css";
يستورد"swiper / css / autoplay";
وظيفةبرنامج() {
يعود (



 spaceBetween = {30}
 slidesPerView = {2}
 الوحدات النمطية = {[التشغيل التلقائي]}
 حلقة = {حقيقي}
 التشغيل التلقائي = {{ تأخير: 3000 }}
 >
<شعبةاسم الطبقة="عنصر">العنصر 1شعبة></SwiperSlide>
<شعبةاسم الطبقة="عنصر">العنصر 2شعبة></SwiperSlide>
<شعبةاسم الطبقة="عنصر">العنصر 3شعبة></SwiperSlide>
<شعبةاسم الطبقة="عنصر">العنصر 4شعبة></SwiperSlide>
 </Swiper>
 </div>
 );
}
يصدّرتقصير برنامج؛

باستخدام تشغيل تلقائي دعامة ، يمكنك تحديد تأخير; في هذه الحالة ، يتم ضبطها على 3000 مللي ثانية.

تكوين واجهات قابلة للتمرير السريع مع ترقيم الصفحات

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

لاستخدام ال ترقيم الصفحات الوحدة النمطية ، فأنت بحاجة إلى استيراده وإدراجه في ملف الوحدات دعامة من Swiper عنصر:

يستورد تتفاعل من"تتفاعل";
يستورد {Swiper، SwiperSlide} من"swiper / رد فعل";
يستورد {ترقيم الصفحات} من"swiper";
يستورد"swiper / css";
يستورد"swiper / css / pagination";
وظيفةبرنامج() {
يعود (



 spaceBetween = {30}
 slidesPerView = {2}
 الوحدات = {[ترقيم الصفحات]}
 حلقة = {حقيقي}
 ترقيم الصفحات = {{ قابل للنقر: حقيقي }}
 >
<شعبةاسم الطبقة="عنصر">العنصر 1شعبة></SwiperSlide>
<شعبةاسم الطبقة="عنصر">العنصر 2شعبة></SwiperSlide>
<شعبةاسم الطبقة="عنصر">العنصر 3شعبة></SwiperSlide>
<شعبةاسم الطبقة="عنصر">العنصر 4شعبة></SwiperSlide>
 </Swiper>
 </div>
 );
}
يصدّرتقصير برنامج؛

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

بالإضافة إلى مكتبة Swiper ترقيم الصفحات وحدة، رد فعل ترقيم الصفحات هو خيار ممتاز آخر لإنشاء ترقيم الصفحات في تطبيق React الخاص بك.

بناء تطبيقات يمكن الوصول إليها باستخدام React

تعمل الواجهات القابلة للتمرير على تحسين تجربة المستخدم لتطبيقك لمستخدمي الشاشة التي تعمل باللمس. يوفر Swiper الكثير من المرونة ويمكنك تخصيصه بسهولة وفقًا لاحتياجات تطبيقك.

يمكن أن تساعد مكتبات واجهة المستخدم المختلفة في تسهيل الوصول إلى تطبيقات React الخاصة بك. توفر هذه المكتبات ميزات ووظائف تعزز تجربة المستخدم لتطبيقك.