您的位置:首页 > 移动开发

关于Swiper3.x的a标签bug

2015-03-30 21:11 302 查看

发现问题:

前些日子做移动端需求用到了Swiper插件,版本是 3.0.0,测试发现如果在多个swiper-slide中添加a标签,那么在搜狗手机浏览器魅族手机系统浏览器(暂时只发现这两款有问题)中只有第一屏的a标签可点击,而其他屏的a标签似乎被什么东西覆盖了。

测试代码如下:

<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1<a href="#">ClickMe</a></div>
<div class="swiper-slide">Slide 2<a href="#">ClickMe</a></div>
<div class="swiper-slide">Slide 3<a href="#">ClickMe</a></div>
<div class="swiper-slide">Slide 4</div>
</div>


然后我尝试了目前最新版 3.0.4,也存在同样问题,而 2.x 没有问题。

解决方案:

很走运的是,当我尝试在各个层加a标签测试是否也有bug时,发现如果DOM结构为下就不会出现bug:

<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1<a href="#">ClickMe</a></div>
<div class="swiper-slide">Slide 2<a href="#">ClickMe</a></div>
<div class="swiper-slide">Slide 3<a href="#">ClickMe</a></div>
<div class="swiper-slide">Slide 4</div>
<a href="#">ClickMe</a>
</div>


即,在swiper-slide同级添加一个a标签,上面的a标签就都可以点击了,是不是很怪异 :D。

没有找到反馈给Swiper开发组的途径,官网提供的q群里也没人知道,如果哪位大神小神有完美解决方案,恳请告知!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  swiper 移动端 滑动