zl程序教程

您现在的位置是:首页 >  其他

当前栏目

使用swiper3的freeMode属性a连接点击失效,跳转无效和 swiper滑动时a标签误触

属性连接 标签 点击 跳转 滑动 失效 无效
2023-09-11 14:14:50 时间

 源代码是这样的:

  <!------------nav----------->
		 	  	    <div id="topNav" class="swiper-container">
		 	  	    	<div class="swiper-wrapper">
		 	  	    		<div class="swiper-slide active"><span><a href="1.html">首页</a></span></div>
		 	  	    		<div class="swiper-slide"><span>视频</span></div>
		 	  	    		<div class="swiper-slide"><span>栏目</span></div>
		 	  	    		<div class="swiper-slide"><span>活动</span></div>
		 	  	    		<div class="swiper-slide"><span>课堂</span></div>
		 	  	    		<div class="swiper-slide"><span>融媒</span></div>
		 	  	    		<div class="swiper-slide"><span>直播</span></div>
		 	  	    		<div class="swiper-slide"><span>云商</span></div>
		 	  	    		<div class="swiper-slide"><span>点播</span></div>
		 	  	    		<div class="swiper-slide"><span>商城</span></div>
		 	  	    		<div class="swiper-slide"><span>报道</span></div>
		 	  	    		<div class="swiper-slide"><span>查询</span></div>
		 	  	    		<div class="swiper-slide"><span>运营</span></div>
		 	  	    	</div>
		 	  	    </div>
  <script type="text/javascript">
		 	  	    	var mySwiper = new Swiper('#topNav', {
		 	  	    		freeMode: true,
		 	  	    		freeModeMomentumRatio: 0.5,
		 	  	    		slidesPerView: 'auto',
		 	  	    
		 	  	    	});
 </script>

经过运行后发现,A标签超链接失效,点击不能实现跳转;

经测试发现是

freeModeMomentumRatio: 0.5,

这行代码在搞鬼!

官方解释:

freeModeMomentumRatio

free模式动量值(移动惯量)。设置的值越大,当释放slide时的滑动距离越大。

freeModeMomentumRatio参数

类型:number   默认:1   举例:5   启用版本:3.0.0


解决:

第一种方法:只需要把这个删了就行!

第二种方法:

增加 preventClicks : false,

<script type="text/javascript">
    window.onload = function () {
        var mySwiper_nav = new Swiper('#topNav', {
        freeMode: true, 
            slidesPerView: 'auto',
            freeModeMomentumRatio: 0.5,
            preventClicks : false,
        });
} 
</script>

官方解释:

preventClicks

当swiper在触摸时阻止默认事件(preventDefault),用于防止触摸时触发链接跳转。


或许你还会遇到下面问题

关于swiper滑动时a标签误触,导致跳转的解决办法

1、思路:判断swiper.animating==true,滑动的时候把a标签的默认事件给阻止了,否则,让它跳转 
2、代码

$(".swiper-slide a").click(function(e){

        //console.log(swiper.animating)
        if(swiper.animating==true){
            e.preventDefault();
        }else {
            location.href = $(this).attr("href")
        }
    });

转自:https://blog.csdn.net/weixin_38930535/article/details/78341511

官方例子:https://3.swiper.com.cn/api/method/2015/0308/251.html