查看: 2270|回复: 3
打印 上一主题 下一主题

swiper3 如何监控现在是向左还是向右

[复制链接]

该用户从未签到

1

主题

2

帖子

24

积分

新手上路

Rank: 1

积分
24
跳转到指定楼层
楼主
发表于 2015-8-6 18:46:31 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
swiper3 如何监控现在是向左还是向右
如同:
swiper 2 的   
onSlidePrev

onSlideNext


麻烦写个例子,谢谢了

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

1

主题

2

帖子

24

积分

新手上路

Rank: 1

积分
24
沙发
 楼主| 发表于 2015-8-6 18:48:28 | 只看该作者
有木有监控左滑 和 右滑 的例子呀
左滑 alert("左滑了一下");

右滑 alert("右滑了一下");

有木有例子谢谢了,万分感谢,急求
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

11

帖子

85

积分

注册会员

Rank: 2

积分
85
板凳
发表于 2015-8-7 10:37:36 | 只看该作者
可以对比mySwiper.activeIndex滑动前后的大小
回复 支持 反对

使用道具 举报

该用户从未签到

0

主题

1

帖子

21

积分

新手上路

Rank: 1

积分
21
地板
发表于 2015-8-12 16:45:49 | 只看该作者
<script>
                $(function () {
                        var tran = 0;
                        var mySwiper = new Swiper('.swiper-container', {
                                //回调函数
                                onInit: function (swiper) {       
                                        //Swiper初始化了
                                },        //回调函数,初始化后执行。可选Swiper实例作为参数。

                                //回调函数,当碰触到slider时执行。可选Swiper和touchstart事件作为参数
                                onTouchStart: function(swiper,even){
                                        tran = mySwiper.translate;        //获取wrapper的位移
                                },

                                //回调函数,手指触碰Swiper并滑动(手指)时执行。此时slide不一定会发生移动
                                onTouchMove: function(swiper){
                                        //你的事件
                                },

                                //回调函数,当释放slider时执行。(释放即执行)
                                onTouchEnd: function (swiper) {
                                        mySwiper.translate > tran ? alert("向右了") : alert("向左了");
                                }
               
                        })
                });
        </script>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
   
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
   
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

今天才刚看API   不知道有没有帮助
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-9-30 03:24 , Processed in 0.058759 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表