微信小程序触摸内容滑动解决方案，适用于wepy框架（微信小程序滑动窗口）

微信小程序触摸内容滑动解决方案，适用于wepy框架（微信小程序滑动窗口）

wepy-com-swiper

微信小程序触摸内容滑动解决方案，适用于wepy框架

为什么要开发这款插件

官方swiper组件：

支持的事件回调很单一从文档上看只是能支持横向滑动拓展性不强

wepy-com-swiper插件:

丰富的事件回调丰富的属性支持横、纵向滑动强拓展（可在原插件基础上二次开发）

ScreenShots

横向滚动

纵向滚动

安装组件

npm install wepy-com-swiper --save

示例

index.wpy

weSwiper初始化

weSwiper通过获取props动态参数进行初始化

在父组件中：

data = { swiper: { slideLength: 3, direction: 'vertical', ... } }

参数

必填项

slideLength

Type: NumberDefault: 0

表示slide的页数

可选项

width

Type: NumberDefault: device.windowWidth

设定slide的宽度（横向滑动时slide滑动间隔距离会根据其值计算）

height

Type: NumberDefault: device.windowHeight

设定slide的高度（纵向滑动时slide滑动间隔距离会根据其值计算）

direction

Type: StringDefault: horizontalOption: horizontal: slide水平方向滑动vertical: slide垂直方向滑动

设定slide滑动方向

initialSlide

Type: NumberDefault: 0

设定初始化时slide的索引

speed

Type: NumberDefault: 300

设定slide过渡时长

timingFunction

Type: StringDefault: easeOption: linear: slide水平方向滑动ease: slide垂直方向滑动ease-in: slide垂直方向滑动ease-in-out: slide垂直方向滑动ease-out: slide垂直方向滑动step-start: slide垂直方向滑动step-end: slide垂直方向滑动

设定slide过渡动画速度曲线

autoplay

Type: NumberDefault: 0

设定slide自动播放间隔时长，设置为0时不自动播放

directionViewName

Type: StringDefault: directionClass

对应视图中direction类名

animationViewName

Type: StringDefault: animationData

对应视图中animation属性名

属性

weswiper.activeIndex

返回当前活动块(激活块)的索引

weswiper.previousIndex

返回上一个活动块的索引

weswiper.width

返回swiper容器的宽度

weswiper.height

返回swiper容器的高度

weswiper.isBeginning

如果swiper处于最初始位置，返回true

weswiper.isEnd

如果swiper处于最末尾位置，返回true

weswiper.speed

返回当前swiper的过渡时长

方法

slideNext(runCallbacks, speed)

滑动到后一个slide

Params: runCallbacks: 可选，设为false不触发onSlideChange回调函数speed: 可选，切换速度

slidePrev(runCallbacks, speed)

滑动到前一个slide。

Params: runCallbacks: 可选，设为false不触发onSlideChange回调函数speed: 可选，切换速度

slideTo(index, speed, runCallbacks)

切换到指定slide。

Params: index: 必选，num，指定将要切换到的slide的索引speed: 可选，切换速度runCallbacks: 可选，设为false不触发onSlideChange回调函数

事件回调

onInit (weswiper)

回调函数，初始化后执行。 可选weswiper实例作为参数。

onTouchStart (weswiper, event)

回调函数，当碰触到slider时执行。可选weswiper和touchstart事件作为参数

onTouchMove (weswiper, event)

回调函数，手指触碰weswiper并滑动（手指）时执行。此时slide不一定会发生移动，比如你手指的移动方向和weswiper的切换方向垂直时

onTouchEnd (weswiper, event)

回调函数，当释放slider时执行。（释放即执行）

onSlideChangeStart (weswiper)

回调函数，weswiper从当前slide开始过渡到另一个slide时执行。触摸情况下，如果释放slide时没有达到过渡条件而回弹时不会触发这个函数，此时可用onTransitionStart。

可接受weswiper实例作为参数，输出的activeIndex是过渡后的slide索引

onSlideChangeEnd (weswiper)

回调函数，weswiper从一个slide过渡到另一个slide结束时执行。

可接受swiper实例作为参数。

onTransitionStart (weswiper)

回调函数，过渡开始时触发，接受weswiper实例作为参数。

onTransitionEnd (weswiper)

回调函数，过渡结束时触发，接收weswiper实例作为参数。

onSlideMove (weswiper)

回调函数，手指触碰weswiper并拖动slide时执行。

onSlideNextStart (weswiper)

回调函数，滑块释放时如果触发slider向前(右、下)切换则执行。类似于onSlideChangeStart，但规定了方向。

onSlideNextEnd (weswiper)

回调函数，slider向前(右、下)切换结束时执行。类似于onSlideChangeEnd，但规定了方向。

onSlidePrevStart (weswiper)

回调函数，滑块释放时如果触发slider向后(左、上)切换则执行。类似于onSlideChangeStart，但规定了方向。

onSlidePrevEnd (swiper)

回调函数，slider向后(左、上)切换结束时执行。类似于onSlideChangeEnd，但规定了方向。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。