we swiper

we-swiper

يشير حل انزلاق محتوى تطبيق WeChat الصغير الذي يعمل باللمس، وتفاصيل تصميم واجهة برمجة التطبيقات والتسمية إلى swiper.js.

لماذا تم تطوير هذا البرنامج المساعد؟

مكون الضرب الرسمي:

• عمليات الاسترجاعات للحدث المدعومة فردية جدًا
• من الوثائق، فهو يدعم فقط الانزلاق الأفقي. (يدعم مكون الضرب الرسمي في الواقع التمرير العمودي. ما عليك سوى تعيين السمة عمودي = "صحيح"، ولكن لم يتم ذكرها في الوثيقة الرسمية. شكرًا لـ @pangz1 لتصحيحها)
• ليست قابلة للتطوير للغاية

البرنامج المساعد we-swiper:

• عمليات الاسترجاعات الغنية بالأحداث
• سمات غنية
• يدعم الانزلاق الأفقي والرأسي
• توسعة قوية (يمكن تطويرها مرتين بناءً على المكون الإضافي الأصلي)

لقطات الشاشة

التمرير الأفقي

قم بالتمرير عموديًا

الاستخدام

استنساخ المشروع إلى الدليل الخاص بك

 cd my-project

git clone https://github.com/dlhandsome/we-swiper.git

أدخل dist/weSwiper.js في ملف المشروع للتطوير

وحدة es6

 import weSwiper from 'dist/weSwiper' 

com.commonjs

 var weSwiper = require ( 'dist/weSwiper' ) 

مثال

example.wxml

 < view class =" we-container {{directionClass}} " >
  < view class =" we-wrapper "
    bindtouchstart =" touchstart "
    bindtouchmove =" touchmove "
    bindtouchend =" touchend "
    animation =" {{animationData}} " >
    < view class =" we-slide " > slide 1 </ view >
    < view class =" we-slide " > slide 2 </ view >
    < view class =" we-slide " > slide 3 </ view >
  </ view >
</ view > 

example.js

 import weSwiper from '../dist/weSwiper'

const option = {
  touchstart ( e ) {
    this . weswiper . touchstart ( e )
  } ,
  touchmove ( e ) {
    this . weswiper . touchmove ( e )
  } ,
  touchend ( e ) {
    this . weswiper . touchend ( e )
  } ,
  onLoad ( ) {
    new weSwiper ( {
      animationViewName : 'animationData' ,
      slideLength : 3 ,
      initialSlide : 0 ,
      /**
       * swiper初始化后执行
       * @param weswiper
       */
      onInit ( weswiper ) {

      } ,
      /**
       * 手指碰触slide时执行
       * @param weswiper
       * @param event
       */
      onTouchStart ( weswiper , event ) {

      } ,
      /**
       * 手指碰触slide并且滑动时执行
       * @param weswiper
       * @param event
       */
      onTouchMove ( weswiper , event ) {

      } ,
      /**
       * 手指离开slide时执行
       * @param weswiper
       * @param event
       */
      onTouchEnd ( weswiper , event ) {

      } ,
      /**
       *  slide达到过渡条件时执行
       */
      onSlideChangeStart ( weswiper ) {

      } ,
      /**
       *  weswiper从一个slide过渡到另一个slide结束时执行
       */
      onSlideChangeEnd ( weswiper ) {

      } ,
      /**
       *  过渡时触发
       */
      onTransitionStart ( weswiper ) {

      } ,
      /**
       *  过渡结束时执行
       */
      onTransitionEnd ( weswiper ) {

      } ,
      /**
       *  手指触碰weswiper并且拖动slide时执行
       */
      onSlideMove ( weswiper ) {

      } ,
      /**
       * slide达到过渡条件 且规定了方向 向前（右、下）切换时执行
       */
      onSlideNextStart ( weswiper ) {

      } ,
      /**
       *  slide达到过渡条件 且规定了方向 向前（右、下）切换结束时执行
       */
      onSlideNextEnd ( weswiper ) {

      } ,
      /**
       *  slide达到过渡条件 且规定了方向 向前（左、上）切换时执行
       */
      onSlidePrevStart ( swiper ) {

      } ,
      /**
       *  slide达到过渡条件 且规定了方向 向前（左、上）切换结束时执行
       */
      onSlidePrevEnd ( weswiper ) {

      }
    } )
  }
}
Page ( option ) 

تهيئة we-swiper

يتم إنشاء مثيل weSwiper في طريقة onLoad

 onLoad ( ) {
  new weSwiper ( {
    slideLength : 3  // 必填，由于目前无法直接获取slide页数，目前只能通过参数写入
  } ) 
} 

يمكن الوصول إلى المثيل في وظيفة ربط الصفحة من خلال this.weswiper

 touchstart ( e ) {
  this . weswiper . touchstart ( e )
} 

تكوين هيكل WXML

 < view class =" we-container {{directionClass}} " >
  < view class =" we-wrapper "
    bindtouchstart =" touchstart "
    bindtouchmove =" touchmove "
    bindtouchend =" touchend "
    animation =" {{animationData}} " >
    < view class =" we-slide " > slide 1 </ view >
    < view class =" we-slide " > slide 2 </ view >
    < view class =" we-slide " > slide 3 </ view >
  </ view >
</ view >

نصيحة: لا تحتاج الحقول في WXML إلى إعطاء قيم افتراضية في بيانات الصفحة. توجد آلية عرض المزامنة داخل we-swiper.

معلمات المنشئ

الحقول المطلوبة

طول الشريحة

• النوع: Number
• الافتراضي: 0

يشير إلى عدد الصفحات في الشريحة

خياري

عرض

• النوع: Number
• الافتراضي: device.windowWidth

ضبط عرض الشريحة (عند الانزلاق أفقيًا، سيتم حساب المسافة بين الشرائح بناءً على قيمتها)

ارتفاع

• النوع: Number
• الافتراضي: device.windowHeight

ضبط ارتفاع الشريحة (عند الانزلاق عموديًا، سيتم حساب المسافة بين الشرائح بناءً على قيمتها)

اتجاه

• النوع: String
• الافتراضي: horizontal
• خيار:
  • horizontal : حرك الشريحة أفقيًا
  • vertical : الشريحة الشريحة عموديا

ضبط اتجاه انزلاق الشريحة

originalSlide

• النوع: Number
• الافتراضي: 0

قم بتعيين فهرس الشريحة أثناء التهيئة

سرعة

• النوع: Number
• الافتراضي: 300

ضبط مدة انتقال الشريحة

TimingFunction

• النوع: String
• الافتراضي: ease
• خيار:
  • linear : حرك الشريحة أفقيًا
  • ease : الشريحة الشريحة عموديا
  • ease-in : قم بتحريك الشريحة عموديًا
  • ease-in-out : قم بتحريك الشريحة عموديًا
  • ease-out : قم بتحريك الشريحة عموديًا
  • step-start : الشريحة الشريحة عموديا
  • step-end : قم بتحريك الشريحة عموديًا

قم بتعيين منحنى سرعة الرسوم المتحركة لانتقال الشريحة

التشغيل التلقائي

• النوع: Number
• الافتراضي: 0

قم بتعيين الفاصل الزمني للتشغيل التلقائي للشريحة عند التعيين على 0، لن يتم تشغيلها تلقائيًا.

DirectionViewName

• النوع: String
• الافتراضي: directionClass

يتوافق مع اسم فئة الاتجاه في طريقة العرض

AnimationViewName

• النوع: String
• الافتراضي: animationData

يتوافق مع اسم سمة الرسوم المتحركة في طريقة العرض

ملكية

weswiper.activeIndex

إرجاع فهرس الكتلة النشطة حاليًا (الكتلة النشطة)

weswiper.previousIndex

إرجاع فهرس الكتلة النشطة السابقة

weswiper.width

إرجاع عرض حاوية swiper

weswiper.height

إرجاع ارتفاع حاوية swiper

weswiper.isBeginning

إذا كان المضرب في الموضع الأولي، فسيتم إرجاع صحيح

weswiper.isEnd

يُرجع صحيحًا إذا كان المضرب في موضع النهاية

weswiper.speed

إرجاع مدة الانتقال للswiper الحالي

طريقة

weswiper.slideNext(runCallbacks، السرعة)

انتقل إلى الشريحة التالية

• المعلمات:
  • runCallbacks : اختياري، اضبطه على false لعدم تشغيل وظيفة رد الاتصال onSlideChange
  • speed : اختياري، سرعة التبديل

weswiper.slidePrev(runCallbacks، السرعة)

انتقل إلى الشريحة السابقة.

• المعلمات:
  • runCallbacks : اختياري، اضبطه على false لعدم تشغيل وظيفة رد الاتصال onSlideChange
  • speed : اختياري، سرعة التبديل

weswiper.slideTo(الفهرس، السرعة، تشغيل الاسترجاعات)

قم بالتبديل إلى الشريحة المحددة.

• المعلمات:
  • index : مطلوب، رقم، يحدد فهرس الشريحة التي سيتم التبديل إليها
  • speed : اختياري، سرعة التبديل
  • runCallbacks : اختياري، اضبطه على false لعدم تشغيل وظيفة رد الاتصال onSlideChange

رد اتصال الحدث

onInit (ممسحة)

وظيفة رد الاتصال، يتم تنفيذها بعد التهيئة. مثيل weswiper الاختياري كوسيطة.

onTouchStart (weswiper، حدث)

وظيفة رد الاتصال، يتم تنفيذها عند لمس شريط التمرير. أحداث weswiper وtouchstart الاختيارية كمعلمات

onTouchMove (weswiper، حدث)

وظيفة رد الاتصال، يتم تنفيذها عندما يلمس الإصبع الماسحة ويتحرك (الإصبع). في هذا الوقت، قد لا تتحرك الشريحة بالضرورة، على سبيل المثال، عندما يكون الاتجاه المتحرك لإصبعك متعامدًا مع اتجاه التبديل للممسحة

onTouchEnd (weswiper، حدث)

وظيفة رد الاتصال، يتم تنفيذها عند تحرير شريط التمرير. (التنفيذ عند الإصدار)

onSlideChangeStart(weswiper)

وظيفة رد الاتصال، يتم تنفيذها عندما ينتقل المسح من الشريحة الحالية إلى شريحة أخرى. في حالة اللمس، إذا لم يتم الوصول إلى حالة الانتقال عند تحرير الشريحة ولن يتم تشغيل هذه الوظيفة عند ارتدادها، فيمكن استخدام onTransitionStart في هذا الوقت.

يقبل مثيلات weswiper كمعلمات، ويكون الناتج activeIndex هو فهرس الشريحة بعد الانتقال.

onSlideChangeEnd(weswiper)

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

يقبل مثيلات swiper كمعلمات.

onTransitionStart(weswiper)

تقبل وظيفة رد الاتصال، التي يتم تشغيلها عند بدء النقل، مثيل weswiper كمعلمة.

onTransitionEnd(weswiper)

وظيفة رد الاتصال، التي يتم تشغيلها عند انتهاء الانتقال، وتستقبل مثيل weswiper كمعلمة.

onSlideMove(weswiper)

وظيفة رد الاتصال، يتم تنفيذها عندما يلمس الإصبع الماسحة ويسحب الشريحة.

onSlideNextStart(weswiper)

وظيفة رد الاتصال، يتم تنفيذها إذا تم تشغيل شريط التمرير للتبديل للأمام (لليمين أو للأسفل) عند تحرير شريط التمرير. يشبه onSlideChangeStart، ولكنه يحدد الاتجاه.

onSlideNextEnd(weswiper)

وظيفة رد الاتصال، يتم تنفيذها عندما يتحرك شريط التمرير للأمام (يمينًا، لأسفل). يشبه onSlideChangeEnd، ولكنه يحدد الاتجاه.

onSlidePrevStart(weswiper)

وظيفة رد الاتصال، يتم تنفيذها إذا تم تشغيل شريط التمرير للتبديل للخلف (يسارًا وأعلى) عند تحرير شريط التمرير. يشبه onSlideChangeStart، ولكنه يحدد الاتجاه.

onSlidePrevEnd(weswiper)

وظيفة رد الاتصال، يتم تنفيذها عندما يتحول شريط التمرير إلى الخلف (يسارًا وأعلى). يشبه onSlideChangeEnd، ولكنه يحدد الاتجاه.

المهام

• إضافة تأثيرات التبديل: التلاشي، والوجه، وما إلى ذلك.

رخصة

ترخيص معهد ماساتشوستس للتكنولوجيا (http://opensource.org/licenses/MIT)

لا تتردد في الاستمتاع والمشاركة في المصدر المفتوح

يساهم

إذا كانت لديك تعليقات أو اقتراحات جيدة، فلا تتردد في إرسال مشكلة أو طلب سحب لي.