0
点赞
收藏
分享

微信扫一扫

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

 源代码是这样的:

<!------------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")
}
});

举报

相关推荐

0 条评论