swiper移动端左右滑动与连接同时触发解决方案

最新推荐文章于 2024-09-03 17:41:18 发布

wangqiuchen_Study

最新推荐文章于 2024-09-03 17:41:18 发布

阅读量5.6k

点赞数

分类专栏： javascript 文章标签： swiper a标签

本文链接：https://blog.csdn.net/wangqiuchen_study/article/details/54094025

版权

javascript 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

  swiper  api中有自己的属性preventClicks可以控制不同时触发，但是经自己测试，只适用于pc端，移动端仍然有问题，以下为

自己的实现方式，仅供参考。项目已经放到资源，下载可以看。

var startY,startX,endX,endY;
var mySwiper = new Swiper('.swiper-container',{
    preventClicks : true,
    pagination: '.swiper-pagination',
    paginationClickable: '.swiper-pagination',
    preventLinksPropagation : true,
    spaceBetween: 30,
    effect: 'fade',
    onTouchStart: function(swiper,event){
        var touch = event.touches[0];
        startY = touch.pageY;
        startX = touch.pageX;
    },
    onTouchMove: function(swiper,event){
        var touch = event.touches[0];
        endX = touch.pageX-startX;
        endY = touch.pageY-startY;
    },
    onTouchEnd: function(swiper){
        if(Math.abs(endX)>5){
            endX=0;
            return false;
        }else{
            var href;
           switch (swiper.index){
               case 1:
                   href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
               case 2:
                   href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
               case 3:
                   href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
               case 4:
                   href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
            }
            self.location = href;
            endX=0;
        }
    }

});

HTML

<div class="swiper-container swiper-container-horizontal"   >
    <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
        <div class="swiper-slide blue-slide swiper-slide-active"  style="background-image:url(https://newimg.jrj.com.cn/2016/12/20161216170436288.jpg)">
            <span style="text-align: center;display: inline-block;width: 100%;height: 100%;" ></span>
        </div>
        <div class="swiper-slide red-slide swiper-slide-next" style="background-image:url(https://newimg.jrj.com.cn/2016/12/20161216170435896.jpg)">
            <span style="text-align: center;display: inline-block;width: 100%;height: 100%;" ></span>
          </div>
        <div class="swiper-slide orange-slide" style="background-image:url(https://newimg.jrj.com.cn/2016/12/20161216170406833.jpg)" >
            <span style="text-align: center;display: inline-block;width: 100%;height: 100%;"></span>
        </div>
        <div class="swiper-slide orange-slide" style="background-image:url(https://newi0.jrj.com.cn/bxcsv2016/banner-lb.png)" >
            <span style="text-align: center;display: inline-block;width: 100%;height: 100%;"></span>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-white"></div>
</div>

效果