we swiper
1.0.0
WeChat applet touch content sliding solution, API design details and naming refer to swiper.js.
cd my-project
git clone https://github.com/dlhandsome/we-swiper.gitdist/weSwiper.js into the project file for development 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 >Tip: Fields in WXML do not need to be given default values in the data of the Page. There is a synchronization view mechanism inside we-swiper.
Number0Indicates the number of pages in the slide
Numberdevice.windowWidthSet the width of the slide (when sliding horizontally, the distance between the slides will be calculated based on its value)
Numberdevice.windowHeightSet the height of the slide (when sliding vertically, the distance between the slides will be calculated based on its value)
Stringhorizontalhorizontal : slide slide horizontallyvertical : slide slide verticallySet slide sliding direction
Number0Set the index of the slide during initialization
Number300Set slide transition duration
Stringeaselinear : slide slide horizontallyease : slide slide verticallyease-in : slide slide verticallyease-in-out : slide slide verticallyease-out : slide slide verticallystep-start : slide slide verticallystep-end : slide slide verticallySet the slide transition animation speed curve
Number0Set the automatic playback interval of the slide. When set to 0, it will not play automatically.
StringdirectionClassCorresponds to the direction class name in the view
StringanimationDataCorresponds to the animation attribute name in the view
Returns the index of the currently active block (activated block)
Returns the index of the previous active block
Returns the width of the swiper container
Returns the height of the swiper container
If the swiper is in the initial position, returns true
Returns true if the swiper is at the end position
Returns the transition duration of the current swiper
Slide to the next slide
runCallbacks : Optional, set to false to not trigger the onSlideChange callback functionspeed : optional, switching speed Slide to the previous slide.
runCallbacks : Optional, set to false to not trigger the onSlideChange callback functionspeed : optional, switching speed Switch to the specified slide.
index : required, num, specifies the index of the slide to be switched tospeed : optional, switching speedrunCallbacks : Optional, set to false to not trigger the onSlideChange callback function Callback function, executed after initialization. Optional weswiper instance as argument.
Callback function, executed when the slider is touched. Optional weswiper and touchstart events as parameters
Callback function, executed when the finger touches the weswiper and slides (finger). At this time, the slide may not necessarily move, for example, when the moving direction of your finger is perpendicular to the switching direction of weswiper
Callback function, executed when the slider is released. (Execute upon release)
Callback function, executed when weswiper transitions from the current slide to another slide. In the case of touch, if the transition condition is not reached when the slide is released and this function will not be triggered when it rebounds, onTransitionStart can be used at this time.
It accepts weswiper instances as parameters, and the output activeIndex is the slide index after transition.
Callback function, executed when weswiper transitions from one slide to another.
Accepts swiper instances as parameters.
Callback function, triggered when the transition starts, accepts a weswiper instance as a parameter.
Callback function, triggered when the transition ends, receiving weswiper instance as parameter.
Callback function, executed when the finger touches the weswiper and drags the slide.
Callback function, executed if the slider is triggered to switch forward (right, down) when the slider is released. Similar to onSlideChangeStart, but specifies the direction.
Callback function, executed when the slider switches forward (right, down). Similar to onSlideChangeEnd, but specifies the direction.
Callback function, executed if the slider is triggered to switch backward (left, up) when the slider is released. Similar to onSlideChangeStart, but specifies the direction.
Callback function, executed when the slider switches backward (left, up). Similar to onSlideChangeEnd, but specifies the direction.
The MIT License(http://opensource.org/licenses/MIT)
Please feel free to enjoy and participate in open source
If you have good comments or suggestions, please feel free to send me an issue or pull request.
