hSwiper wx

hSwiper-wx

Mini-Programm-Swiper-Komponente

Für die Verwendung dieser Komponente sind die Mini Program Basic Library Version 2.2.2 und der npm-Build der Entwicklertools erforderlich. Spezifische Details finden Sie in der offiziellen npm-Dokumentation.

Die alte Version des Portals und die neue Version unterstützen bereits die Installation von NPM-Paketen

Demo

1. Ebene

2. Vertikale

3. Keine Schleife

Funktion

1. Unterstützt horizontales und vertikales Scrollen
2. Unterstützt nahtloses Scrollen in Schleifen
3. Der Übergangsverschiebungseffekt unterstützt die Anpassung
4. Die Übergangsverschiebungszeit unterstützt die Anpassung
5. Unterstützt das Scrollen unendlicher Elemente ohne Verzögerung (nicht implementiert, Fortsetzung folgt...)

Installieren

  npm install -- save hswiper - wx 

verwenden

1. Fügen Sie die Konfiguration der benutzerdefinierten Komponente hswiper-wx in der JSON-Konfigurationsdatei der Seite hinzu

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

2. Erstellen Sie die folgende Verzeichnisdatei im Projektstammverzeichnis

  --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. Auf der Seite, die Sie verwenden müssen

 /// 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)
  }
} ) 

Objektbeschreibung

Feldname	Typ	Erforderlich	beschreiben
Vorlagenname	Zeichenfolge	NEIN	Der dem Element entsprechende Vorlagenname. Globale Einstellung, der Standardwert ist _hswiper_emptyItem_default, global. Wenn jedes Element eine andere Vorlage verwenden muss, können Sie dem Element den Attributwert templateName hinzufügen, der den globalen templateName überschreibt.
Datenliste	Array	Ja	Daten, die gerendert werden sollen
Breite	Nummer	NEIN	Die Breite des Swiper-Containers. Der Standardwert ist die Breite des Bildschirms
Höhe	Nummer	NEIN	Die Höhe des Swiper-Containers. Der Standardwert ist die Höhe des Bildschirms
recyceln	Boolescher Wert	NEIN	Ob kreisförmig gescrollt werden soll, der Standardwert false
Vertikale	Boolescher Wert	NEIN	Ob vertikal gescrollt werden soll, Standardwert false
Polsterung	Nummer	NEIN	Dieser Parameter wird verwendet, um die Breite und Höhe jedes Scroll-Elements zu bestimmen. Die Breite jedes Elements ist width - (padding + paddingX) * 2 und die Höhe ist height - (padding + paddingY) * 2 Der Standardwert ist 0
paddingX	Nummer	NEIN	Wie oben, der Standardwert ist 0
PolsterungY	Nummer	NEIN	Wie oben, der Standardwert ist 0
moveTo	Nummer	NEIN	Wenn die Eigenschaft geändert wird, springt das Plug-in zur Datenansicht am angegebenen Index, 0 < moveTo < dataList.length
moveToWithOutAnimation	Nummer	NEIN	Wie oben, jedoch ohne Übergangsanimation
initIndex	Nummer	NEIN	Ansichtsindex, zu dem beim Initialisieren des Plug-Ins gesprungen werden soll, Standardwert 0
Animationstyp	Zeichenfolge	NEIN	Übergangsanimationstyp, einer von ['linear', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end'] , Standardwert ease .
Animationsdauer	Nummer	NEIN	Übergangsanimationszeit, Standardwert 300

Ereignis

Veranstaltungsname	beschreiben
ersteAnsicht	Wird ausgelöst, wenn die Ansicht zur ersten Ansicht gesprungen ist
bereitsFirstView	Im Nicht-Schleifenmodus wird dies ausgelöst, wenn die Ansicht, zu der wiederholt gesprungen wird, die erste Ansicht ist.
beforeViewChange	Wird vor dem Ansichtssprung ausgelöst
afterViewChange	Wird vor dem Ansichtssprung ausgelöst
lastView	Wird ausgelöst, wenn die Ansicht zur letzten Ansicht gesprungen ist
bereitsLastView	Im Nicht-Loop-Modus wird dies ausgelöst, wenn die Ansicht, zu der wiederholt gesprungen wird, die letzte Ansicht ist.
bewegen	Wird ausgelöst, wenn sich die Ansicht bewegt
onTap	Wird ausgelöst, wenn auf jedes Element geklickt wird

---

Für eine spezifische Verwendung sehen Sie sich bitte die Beispiele im Beispielordner mit Kommentaren an. Fragen sind willkommen! ! !