we swiper
1.0.0
WeChat-Applet-Touch-Content-Sliding-Lösung, API-Designdetails und Benennung finden Sie unter swiper.js.
cd my-project
git clone https://github.com/dlhandsome/we-swiper.gitdist/weSwiper.js zur Entwicklung in die Projektdatei ein import weSwiper from 'dist/weSwiper' var weSwiper = require ( 'dist/weSwiper' ) < 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 > 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 ) onLoad ( ) {
new weSwiper ( {
slideLength : 3 // 必填，由于目前无法直接获取slide页数，目前只能通过参数写入
} )
} touchstart ( e ) {
this . weswiper . touchstart ( e )
} < 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 >Tipp: Feldern in WXML müssen in den Daten der Seite keine Standardwerte zugewiesen werden. In we-swiper gibt es einen Synchronisierungsansichtsmechanismus.
Number0Gibt die Anzahl der Seiten in der Folie an
Numberdevice.windowWidthLegen Sie die Breite der Folie fest (beim horizontalen Gleiten wird der Abstand zwischen den Folien anhand seines Werts berechnet).
Numberdevice.windowHeightStellen Sie die Höhe der Folie ein (beim vertikalen Gleiten wird der Abstand zwischen den Folien basierend auf diesem Wert berechnet)
Stringhorizontalhorizontal : horizontal schiebenvertical : vertikal schiebenSchieberichtung des Schiebers einstellen
Number0Legen Sie den Index der Folie während der Initialisierung fest
Number300Legen Sie die Dauer des Folienübergangs fest
Stringeaselinear : horizontal schiebenease : vertikal schiebenease-in : vertikal schiebenease-in-out : vertikal schiebenease-out : Schieben Sie den Schieber vertikalstep-start : Schieben Sie den Schieber vertikalstep-end : vertikal schiebenLegen Sie die Geschwindigkeitskurve der Folienübergangsanimation fest
Number0Legen Sie das automatische Wiedergabeintervall der Folie fest. Bei der Einstellung 0 wird die Folie nicht automatisch abgespielt.
StringdirectionClassEntspricht dem Richtungsklassennamen in der Ansicht
StringanimationDataEntspricht dem Namen des Animationsattributs in der Ansicht
Gibt den Index des aktuell aktiven Blocks (aktivierter Block) zurück.
Gibt den Index des vorherigen aktiven Blocks zurück
Gibt die Breite des Swiper-Containers zurück
Gibt die Höhe des Swiper-Containers zurück
Wenn sich der Swiper in der Ausgangsposition befindet, wird „true“ zurückgegeben
Gibt true zurück, wenn sich der Swiper an der Endposition befindet
Gibt die Übergangsdauer des aktuellen Swipers zurück
Schieben Sie zur nächsten Folie
runCallbacks : Optional, auf false setzen, um die Rückruffunktion onSlideChange nicht auszulösenspeed : optional, Schaltgeschwindigkeit Schieben Sie zur vorherigen Folie.
runCallbacks : Optional, auf false setzen, um die Rückruffunktion onSlideChange nicht auszulösenspeed : optional, Schaltgeschwindigkeit Wechseln Sie zur angegebenen Folie.
index : erforderlich, num, gibt den Index der Folie an, zu der gewechselt werden sollspeed : optional, SchaltgeschwindigkeitrunCallbacks : Optional, auf false setzen, um die Rückruffunktion onSlideChange nicht auszulösen Rückruffunktion, ausgeführt nach der Initialisierung. Optionale Weswiper-Instanz als Argument.
Rückruffunktion, die ausgeführt wird, wenn der Schieberegler berührt wird. Optionale Weswiper- und Touchstart-Ereignisse als Parameter
Rückruffunktion, ausgeführt, wenn der Finger den Weswiper berührt und gleitet (Finger). Zu diesem Zeitpunkt bewegt sich der Schieber möglicherweise nicht unbedingt, z. B. wenn die Bewegungsrichtung Ihres Fingers senkrecht zur Schaltrichtung des Wischers verläuft
Rückruffunktion, die ausgeführt wird, wenn der Schieberegler losgelassen wird. (Bei Freigabe ausführen)
Rückruffunktion, die ausgeführt wird, wenn weswiper von der aktuellen Folie zu einer anderen Folie wechselt. Wenn bei Berührung die Übergangsbedingung beim Loslassen der Folie nicht erreicht wird und diese Funktion beim Zurückprallen nicht ausgelöst wird, kann zu diesem Zeitpunkt onTransitionStart verwendet werden.
Es akzeptiert weswiper-Instanzen als Parameter und der ausgegebene activeIndex ist der Folienindex nach dem Übergang.
Rückruffunktion, die ausgeführt wird, wenn weswiper von einer Folie zur anderen wechselt.
Akzeptiert Swiper-Instanzen als Parameter.
Die Rückruffunktion, die beim Start des Übergangs ausgelöst wird, akzeptiert eine Weswiper-Instanz als Parameter.
Rückruffunktion, ausgelöst, wenn der Übergang endet, und empfängt die Weswiper-Instanz als Parameter.
Rückruffunktion, die ausgeführt wird, wenn der Finger den Weswiper berührt und die Folie zieht.
Rückruffunktion, die ausgeführt wird, wenn der Schieberegler beim Loslassen des Schiebereglers dazu veranlasst wird, nach vorne (rechts, unten) zu wechseln. Ähnlich wie onSlideChangeStart, gibt jedoch die Richtung an.
Rückruffunktion, ausgeführt, wenn der Schieberegler nach vorne (rechts, unten) wechselt. Ähnlich wie onSlideChangeEnd, gibt jedoch die Richtung an.
Rückruffunktion, die ausgeführt wird, wenn der Schieberegler ausgelöst wird, um beim Loslassen des Schiebereglers nach hinten (links, oben) zu wechseln. Ähnlich wie onSlideChangeStart, gibt jedoch die Richtung an.
Rückruffunktion, ausgeführt, wenn der Schieberegler nach hinten wechselt (links, oben). Ähnlich wie onSlideChangeEnd, gibt jedoch die Richtung an.
Die MIT-Lizenz (http://opensource.org/licenses/MIT)
Bitte zögern Sie nicht, Open Source zu genießen und daran teilzunehmen
Wenn Sie gute Kommentare oder Vorschläge haben, können Sie mir gerne eine Problem- oder Pull-Anfrage senden.
