we swiper
1.0.0
La solución deslizante de contenido táctil del subprograma WeChat, los detalles de diseño de API y los nombres se refieren a swiper.js.
cd my-project
git clone https://github.com/dlhandsome/we-swiper.gitdist/weSwiper.js en el archivo del proyecto para el desarrollo. 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 >Consejo: No es necesario asignar valores predeterminados a los campos en WXML en los datos de la página. Hay un mecanismo de vista de sincronización dentro de we-swiper.
Number0Indica el número de páginas de la diapositiva.
Numberdevice.windowWidthEstablezca el ancho de la diapositiva (al deslizarse horizontalmente, la distancia entre las diapositivas se calculará en función de su valor)
Numberdevice.windowHeightEstablezca la altura de la diapositiva (al deslizarse verticalmente, la distancia entre las diapositivas se calculará en función de su valor)
Stringhorizontalhorizontal : deslizar deslizar horizontalmentevertical : deslizar deslizar verticalmenteEstablecer dirección de deslizamiento deslizante
Number0Establecer el índice de la diapositiva durante la inicialización
Number300Establecer la duración de la transición de diapositivas
Stringeaselinear : deslizar deslizar horizontalmenteease : deslizar deslizar verticalmenteease-in : deslizar deslizar verticalmenteease-in-out : deslizamiento verticalease-out : deslizar deslizar verticalmentestep-start : deslizar deslizar verticalmentestep-end : deslizar deslizar verticalmenteEstablecer la curva de velocidad de la animación de transición de diapositivas
Number0Establezca el intervalo de reproducción automática de la diapositiva. Cuando se establece en 0, no se reproducirá automáticamente.
StringdirectionClassCorresponde al nombre de la clase de dirección en la vista.
StringanimationDataCorresponde al nombre del atributo de animación en la vista.
Devuelve el índice del bloque actualmente activo (bloque activado)
Devuelve el índice del bloque activo anterior.
Devuelve el ancho del contenedor swiper.
Devuelve la altura del contenedor swiper.
Si el swiper está en la posición inicial, devuelve verdadero
Devuelve verdadero si el swiper está en la posición final
Devuelve la duración de la transición del swiper actual.
Pase a la siguiente diapositiva
runCallbacks : opcional, establecido en falso para no activar la función de devolución de llamada onSlideChangespeed : opcional, velocidad de conmutación. Desliza a la diapositiva anterior.
runCallbacks : opcional, establecido en falso para no activar la función de devolución de llamada onSlideChangespeed : opcional, velocidad de conmutación. Cambie a la diapositiva especificada.
index : requerido, num, especifica el índice de la diapositiva a la que se cambiaráspeed : opcional, velocidad de conmutación.runCallbacks : opcional, establecido en falso para no activar la función de devolución de llamada onSlideChange Función de devolución de llamada, ejecutada después de la inicialización. Instancia opcional de weswiper como argumento.
Función de devolución de llamada, ejecutada cuando se toca el control deslizante. Eventos weswiper y touchstart opcionales como parámetros
Función de devolución de llamada, ejecutada cuando el dedo toca el weswiper y se desliza (dedo). En este momento, es posible que la diapositiva no necesariamente se mueva, por ejemplo, cuando la dirección de movimiento de su dedo es perpendicular a la dirección de cambio de weswiper.
Función de devolución de llamada, ejecutada cuando se suelta el control deslizante. (Ejecutar al momento del lanzamiento)
Función de devolución de llamada, ejecutada cuando weswiper pasa de la diapositiva actual a otra diapositiva. En el caso del tacto, si no se alcanza la condición de transición cuando se suelta el deslizamiento y esta función no se activará cuando rebote, se puede usar onTransitionStart en este momento.
Acepta instancias de weswiper como parámetros y la salida activeIndex es el índice de diapositiva después de la transición.
Función de devolución de llamada, ejecutada cuando weswiper pasa de una diapositiva a otra.
Acepta instancias de swiper como parámetros.
La función de devolución de llamada, que se activa cuando comienza la transición, acepta una instancia de weswiper como parámetro.
Función de devolución de llamada, que se activa cuando finaliza la transición y recibe la instancia de weswiper como parámetro.
Función de devolución de llamada, que se ejecuta cuando el dedo toca el weswiper y arrastra la diapositiva.
Función de devolución de llamada, ejecutada si el control deslizante se activa para avanzar (derecha, abajo) cuando se suelta el control deslizante. Similar a onSlideChangeStart, pero especifica la dirección.
Función de devolución de llamada, ejecutada cuando el control deslizante avanza (derecha, abajo). Similar a onSlideChangeEnd, pero especifica la dirección.
Función de devolución de llamada, ejecutada si se activa el control deslizante para retroceder (izquierda, arriba) cuando se suelta el control deslizante. Similar a onSlideChangeStart, pero especifica la dirección.
Función de devolución de llamada, ejecutada cuando el control deslizante retrocede (izquierda, arriba). Similar a onSlideChangeEnd, pero especifica la dirección.
La licencia MIT (http://opensource.org/licenses/MIT)
Siéntase libre de disfrutar y participar en código abierto.
Si tiene buenos comentarios o sugerencias, no dude en enviarme un problema o una solicitud de extracción.
