hSwiper wx

hSwiper-wx

مكون برنامج مصغر

يتطلب استخدام هذا المكون إصدار Mini Program Basic Library الإصدار 2.2.2 وبناء npm لأدوات المطور. يمكن العثور على تفاصيل محددة في وثائق npm الرسمية.

الإصدار القديم من البوابة، الإصدار الجديد يدعم بالفعل تثبيت حزمة npm

تجريبي

1. مستوى

2. رَأسِيّ

3. لا حلقة

وظيفة

1. دعم التمرير الأفقي والرأسي
2. دعم حلقة التمرير السلس
3. تأثير الإزاحة الانتقالية يدعم التخصيص
4. وقت الإزاحة الانتقالية يدعم التخصيص
5. دعم التمرير للعناصر اللانهائية دون تأخير (لم يتم تنفيذه، يتبع...)

ثَبَّتَ

  npm install -- save hswiper - wx 

يستخدم

1. أضف تكوين المكون المخصص hswiper-wx في ملف تكوين json الخاص بالصفحة

  {
    "usingComponents" : {
      "hswiper" : " hswiper-wx " ,
    }
  }

2. قم بإنشاء ملف الدليل التالي في الدليل الجذر للمشروع

  --hSwiper
      --swiperTemplate.wxml
      --swiperTemplate.wxss

 // swiperTemplate.wxml
// 每个视图的内容的wxml都写在该文件里面，使用 template标签 ，并且命名 ,当调用这里面的模版时，会自动注入 item以及 index数据，index表示是当前元素的元素索引 ，item则表示当前元素 数据。（相当于dataList[index]=item，但是 list不会注入到模版里面）

<template name="hSwiperItem">
  <view style="width: 100%; height: 100%;" class="imgBox">
    <view style="width: 100%; height: 100%;" class="imgBorder">
      <image class="imgOmg" mode="widthFix" src="{{item}}"></image>
    </view>
  </view>
</template>

<template name="hSwiperItem2">
  <view style="width: 100%; height: 100%;">
    {{item}}
  </view>
</template>

 // swiperTemplate.wxss, swiperTemplate.wxml对应的样式
.imgBox {
  padding: 10px 10px;
  box-sizing: border-box;
  flex: 1;
  justify-content: center;
  align-items: center
}

.imgBorder {
  border: 1px solid #eee;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}

.imgOmg {
  display: block;
  width: 80%;
  height: 80%;
  border-radius: 6px;
}

3. في الصفحة التي تحتاج إلى استخدامها

 /// wxml中
< View style = "width: 320px; height: 500px"
    class = "swiper"
>
  < comp
    recycle = "{{recyle}}"
    vertical = "{{false}}"
    templateName = "hSwiperItem"
    padding = "{{30}}"
    moveTo = "{{moveTo}}"
    bind : customevent = "getRef"
    initIndex = "{{2}}"
    width = "{{320}}"
    height = "{{500}}"
    animationType = "ease-out"
    animationDuration = "300"
    bind : firstView = "firstView"
    bind : alreadyFirstView = "alreadyFirstView"
    bind : beforeViewChange = "beforeViewChange"
    bind : afterViewChange = "afterViewChange"
    bind : lastView = "lastView"
    bind : alreadyLastView = "alreadyLastView"
    bind : move = "viewMove"
    dataList = "{{dataList}}"
  > </ comp >
</ View > 

 // js 中
Page ( {
  data : {
    dataList : [
      'http://statics.h-five.com/db2.jpg' ,
      'http://statics.h-five.com/db3.jpg' ,
      'http://statics.h-five.com/little-love.jpg' ,
      'http://statics.h-five.com/withme.jpg'
    ] ,
    dataList2 : [ 0 , 1 , 2 , 3 , 4 ] ,
    moveTo : 0 ,
    recyle : false
  } ,
  onReady ( ) {
    if ( this . data . recyle ) {
      setInterval ( ( ) => {
        this . setData ( {
          moveTo : ( this . data . moveTo + 1 ) % this . data . dataList . length
        } )
        console . log ( 'change view' )
      } , 1000 )
    }
  } ,
  alreadyFirstView ( e ) {
    console . log ( 'alreadyFirstView' , e )
  } ,
  firstView ( e ) {
    console . log ( 'firstView' , e )
  } ,
  beforeViewChange ( e ) {
    console . log ( 'beforeViewChange' , e )
  } ,
  afterViewChange ( e ) {
    console . log ( 'afterViewChange' , e )
  } ,
  lastView ( e ) {
    console . log ( 'lastView' , e )
  } ,
  alreadyLastView ( e ) {
    console . log ( 'alreadyLastView' , e )
  } ,
  viewMove ( e ) {
    // console.log('viewMove', e)
  }
} ) 

وصف العقار

اسم الحقل	يكتب	مطلوب	يصف
اسم القالب	خيط	لا	اسم القالب المطابق للعنصر. الإعداد العام، القيمة الافتراضية هي _hswiper_emptyItem_default، عمومية. إذا كان كل عنصر يحتاج إلى استخدام قالب مختلف، فيمكنك إضافة قيمة سمة templateName إلى العنصر، والتي ستتجاوز اسم القالب العام.
dataList	صفيف	نعم	البيانات المطلوب تقديمها
عرض	رقم	لا	عرض حاوية الممسحة، القيمة الافتراضية هي عرض الشاشة
ارتفاع	رقم	لا	ارتفاع حاوية الممسحة، القيمة الافتراضية هي ارتفاع الشاشة
إعادة التدوير	منطقية	لا	ما إذا كان سيتم التمرير بطريقة دائرية، فإن القيمة الافتراضية false
رَأسِيّ	منطقية	لا	ما إذا كان سيتم التمرير عموديًا أم لا، فالقيمة الافتراضية false
حشوة	رقم	لا	يتم استخدام هذه المعلمة لتحديد العرض والارتفاع لكل عنصر تمرير. عرض كل عنصر هو width - (padding + paddingX) * 2 ، والارتفاع هو height - (padding + paddingY) * 2 القيمة الافتراضية هي 0.
الحشوX	رقم	لا	كما هو مذكور أعلاه، القيمة الافتراضية هي 0
الحشوY	رقم	لا	كما هو مذكور أعلاه، القيمة الافتراضية هي 0
moveTo	رقم	لا	عندما يتم تغيير الخاصية، سينتقل المكون الإضافي إلى عرض البيانات في الفهرس المحدد، 0 < moveTo < dataList.length
com.moveToWithOutAnimation	رقم	لا	كما هو مذكور أعلاه، ولكن بدون الرسوم المتحركة الانتقالية
initIndex	رقم	لا	عرض الفهرس للانتقال إليه عند تهيئة المكون الإضافي، القيمة الافتراضية 0
AnimationType	خيط	لا	نوع الرسوم المتحركة الانتقالية، واحد من ['linear', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end'] ، القيمة الافتراضية ease
الرسوم المتحركةDuration	رقم	لا	وقت الرسوم المتحركة الانتقالية، القيمة الافتراضية 300

حدث

اسم الحدث	يصف
firstView	يتم تشغيله عند الانتقال إلى العرض وهو العرض الأول
بالفعلFirstView	في الوضع غير التكراري، يتم تشغيل هذا عندما يكون العرض الذي يتم القفز إليه بشكل متكرر هو العرض الأول.
beforeViewChange	تم تشغيله قبل عرض القفزة
afterViewChange	تم تشغيله قبل عرض القفزة
lastView	يتم تشغيله عند الانتقال إلى العرض وهو العرض الأخير
بالفعلLastView	في الوضع غير التكراري، يتم تشغيل هذا عندما يكون العرض الذي يتم القفز إليه بشكل متكرر هو العرض الأخير.
يتحرك	يتم تشغيله عندما يتحرك العرض
onTap	يتم تشغيله عند النقر فوق كل عنصر

---

لاستخدام محدد، يرجى الاطلاع على الأمثلة في مجلد الأمثلة، مع التعليقات. الأسئلة هي موضع ترحيب! ! !