we swiper
1.0.0
Решение для сенсорного перемещения контента апплета WeChat, детали дизайна API и наименование относятся к swiper.js.
cd my-project
git clone https://github.com/dlhandsome/we-swiper.gitdist/weSwiper.js в файл проекта для разработки. 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 >Совет: Полям в WXML не обязательно указывать значения по умолчанию в данных Страницы. Внутри we-swiper есть механизм просмотра синхронизации.
Number0Указывает количество страниц на слайде.
Numberdevice.windowWidthУстановите ширину слайда (при горизонтальном скольжении расстояние между слайдами будет рассчитываться исходя из ее значения)
Numberdevice.windowHeightУстановите высоту слайда (при вертикальном скольжении расстояние между слайдами будет рассчитываться исходя из его значения)
Stringhorizontalhorizontal : сдвиньте слайд горизонтальноvertical : сдвинуть слайд вертикальноУстановить направление скольжения слайда
Number0Установите индекс слайда во время инициализации
Number300Установить продолжительность перехода слайдов
Stringeaselinear : скольжение по горизонталиease : сдвиньте слайд вертикальноease-in : сдвиньте слайд вертикальноease-in-out : сдвиньте слайд вертикальноease-out : сдвинуть слайд вертикальноstep-start : сдвинуть слайд вертикальноstep-end : сдвиньте слайд вертикальноУстановите кривую скорости анимации перехода слайдов
Number0Установите интервал автоматического воспроизведения слайда. Если установлено значение 0, он не будет воспроизводиться автоматически.
StringdirectionClassСоответствует имени класса направления в представлении.
StringanimationDataСоответствует имени атрибута анимации в представлении.
Возвращает индекс текущего активного блока (активированного блока)
Возвращает индекс предыдущего активного блока
Возвращает ширину контейнера свайпера
Возвращает высоту контейнера свайпа
Если свайпер находится в исходном положении, возвращает true
Возвращает true, если свайп находится в конечной позиции
Возвращает продолжительность перехода текущего свайпа
Перейти к следующему слайду
runCallbacks : необязательно, установите значение false, чтобы не запускать функцию обратного вызова onSlideChange.speed : опционально, скорость переключения Переход к предыдущему слайду.
runCallbacks : необязательно, установите значение false, чтобы не запускать функцию обратного вызова onSlideChange.speed : опционально, скорость переключения Переключиться на указанный слайд.
index : требуется, число, указывает индекс слайда, на который нужно переключиться.speed : опционально, скорость переключенияrunCallbacks : необязательно, установите значение false, чтобы не запускать функцию обратного вызова onSlideChange. Функция обратного вызова, выполняемая после инициализации. Необязательный экземпляр weswiper в качестве аргумента.
Функция обратного вызова, выполняемая при касании ползунка. Дополнительные события weswiper и touchstart в качестве параметров.
Функция обратного вызова, выполняемая, когда палец касается весвайпера и скользит (палец). При этом слайд не обязательно может двигаться, например, если направление движения вашего пальца перпендикулярно направлению переключения weswiper.
Функция обратного вызова, выполняемая при отпускании ползунка. (Выполнить после выпуска)
Функция обратного вызова, выполняемая, когда weswiper переходит с текущего слайда на другой слайд. В случае касания, если условие перехода не достигается при отпускании слайда и эта функция не срабатывает при его отскоке, в это время можно использовать onTransitionStart.
Он принимает экземпляры weswiper в качестве параметров, а выходной activeIndex — это индекс слайда после перехода.
Функция обратного вызова, выполняемая, когда weswiper переходит от одного слайда к другому.
Принимает экземпляры swiper в качестве параметров.
Функция обратного вызова, запускаемая при начале перехода, принимает экземпляр weswiper в качестве параметра.
Функция обратного вызова, срабатывающая при завершении перехода и получающая экземпляр weswiper в качестве параметра.
Функция обратного вызова, выполняемая, когда палец касается Weswiper и перетаскивает слайд.
Функция обратного вызова, выполняемая при срабатывании ползунка для переключения вперед (вправо, вниз) при отпускании ползунка. Аналогично onSlideChangeStart, но указывает направление.
Функция обратного вызова, выполняемая при переключении ползунка вперед (вправо, вниз). Аналогично onSlideChangeEnd, но указывает направление.
Функция обратного вызова, выполняемая, если ползунок срабатывает для переключения назад (влево, вверх) при отпускании ползунка. Аналогично onSlideChangeStart, но указывает направление.
Функция обратного вызова, выполняемая при переключении ползунка назад (влево, вверх). Аналогично onSlideChangeEnd, но указывает направление.
Лицензия MIT (http://opensource.org/licenses/MIT)
Пожалуйста, не стесняйтесь наслаждаться и участвовать в открытом исходном коде.
Если у вас есть хорошие комментарии или предложения, пожалуйста, присылайте мне вопрос или запрос на вытягивание.
