we swiper
1.0.0
Solução de deslizamento de conteúdo de toque do miniaplicativo WeChat, detalhes de design de API e nomenclatura referem-se a swiper.js.
cd my-project
git clone https://github.com/dlhandsome/we-swiper.gitdist/weSwiper.js no arquivo do projeto para desenvolvimento 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 >Dica: Os campos em WXML não precisam receber valores padrão nos dados da página. Existe um mecanismo de visualização de sincronização dentro do we-swiper.
Number0Indica o número de páginas do slide
Numberdevice.windowWidthDefina a largura do slide (ao deslizar horizontalmente, a distância entre os slides será calculada com base no seu valor)
Numberdevice.windowHeightDefina a altura do slide (ao deslizar verticalmente, a distância entre os slides será calculada com base no seu valor)
Stringhorizontalhorizontal : deslizar o slide horizontalmentevertical : deslizar o slide verticalmenteDefinir a direção de deslizamento do slide
Number0Defina o índice do slide durante a inicialização
Number300Definir duração da transição de slides
Stringeaselinear : deslize o slide horizontalmenteease : deslize o slide verticalmenteease-in : deslize o slide verticalmenteease-in-out : deslize o slide verticalmenteease-out : deslize o slide verticalmentestep-start : deslize o slide verticalmentestep-end : deslize o slide verticalmenteDefina a curva de velocidade da animação de transição de slides
Number0Defina o intervalo de reprodução automática do slide. Quando definido como 0, ele não será reproduzido automaticamente.
StringdirectionClassCorresponde ao nome da classe de direção na visualização
StringanimationDataCorresponde ao nome do atributo de animação na visualização
Retorna o índice do bloco atualmente ativo (bloco ativado)
Retorna o índice do bloco ativo anterior
Retorna a largura do contêiner do swiper
Retorna a altura do contêiner do swiper
Se o swiper estiver na posição inicial, retorna verdadeiro
Retorna verdadeiro se o swiper estiver na posição final
Retorna a duração da transição do swiper atual
Deslize para o próximo slide
runCallbacks : opcional, defina como false para não acionar a função de retorno de chamada onSlideChangespeed : opcional, velocidade de comutação Deslize para o slide anterior.
runCallbacks : opcional, defina como false para não acionar a função de retorno de chamada onSlideChangespeed : opcional, velocidade de comutação Mude para o slide especificado.
index : obrigatório, num, especifica o índice do slide para o qual será alternadospeed : opcional, velocidade de comutaçãorunCallbacks : opcional, defina como false para não acionar a função de retorno de chamada onSlideChange Função de retorno de chamada, executada após a inicialização. Instância weswiper opcional como argumento.
Função de retorno de chamada, executada quando o controle deslizante é tocado. Eventos opcionais weswiper e touchstart como parâmetros
Função de retorno de chamada, executada quando o dedo toca o weswiper e desliza (dedo). Neste momento, o slide pode não se mover necessariamente, por exemplo, quando a direção do movimento do seu dedo é perpendicular à direção de mudança do weswiper
Função de retorno de chamada, executada quando o controle deslizante é liberado. (Executar após o lançamento)
Função de retorno de chamada, executada quando o weswiper faz a transição do slide atual para outro slide. No caso de toque, se a condição de transição não for atingida quando o slide for liberado e esta função não for acionada quando ele rebater, onTransitionStart poderá ser usado neste momento.
Ele aceita instâncias weswiper como parâmetros e a saída activeIndex é o índice do slide após a transição.
Função de retorno de chamada, executada quando o weswiper faz a transição de um slide para outro.
Aceita instâncias de swiper como parâmetros.
A função de retorno de chamada, acionada quando a transição é iniciada, aceita uma instância weswiper como parâmetro.
Função callback, acionada quando a transição termina, recebendo como parâmetro a instância weswiper.
Função de retorno de chamada, executada quando o dedo toca o weswiper e arrasta o slide.
Função de retorno de chamada, executada se o controle deslizante for acionado para avançar (direita, baixo) quando o controle deslizante for liberado. Semelhante a onSlideChangeStart, mas especifica a direção.
Função de retorno de chamada, executada quando o controle deslizante avança (direita, baixo). Semelhante a onSlideChangeEnd, mas especifica a direção.
Função de retorno de chamada, executada se o controle deslizante for acionado para retroceder (esquerda, para cima) quando o controle deslizante for liberado. Semelhante a onSlideChangeStart, mas especifica a direção.
Função de retorno de chamada, executada quando o controle deslizante muda para trás (esquerda, para cima). Semelhante a onSlideChangeEnd, mas especifica a direção.
A licença MIT (http://opensource.org/licenses/MIT)
Sinta-se à vontade para aproveitar e participar do código aberto
Se você tiver bons comentários ou sugestões, sinta-se à vontade para me enviar um problema ou solicitação de pull.
