今天再开发项目的过程中使用了swiper组件,遇到一个挺奇葩的现象。
一 问题描述
页面如下图所示,上方是一个正常的banner,使用swiper组件实现的,下面是一个list的列表。出现的问题是:当上面轮播的banner滑动到第二页的时候,用手滑动下面的list,整个页面都跟着左滑或者右滑。
二 解决思路
出现上述问题后,第一时间觉得有可能是滑动的过程中父类的高度变化导致上面banner的高度被撑开到页面高度。但是查看元素高度根本就没有变化。
再接着注释掉上面的banner,发现页面不能左滑或者右滑了,所以确定是上面swiper引起的。
然后再仔细看了一下初始化swiper的代码,好像并没有什么异常。
mySwiper_banner = new Swiper('.swiper-container_banner', {
pagination: '.swiper-container_banner .swiper-pagination',
paginationClickable: true,
loop: true,
speed: 400,
spaceBetween: 0,
observer: true,
observeParents: true,
autoplayDisableOnInteraction: false,
touchMoveStopPropagation: true,
autoplay: 4000,
onTouchEnd: function(){
},
onTap:function(swiper,event){
//some code
}
});
<div class="swiper-container_banner">
<ul class="swiper-wrapper"></ul>
<div class="swiper-pagination"></div>
</div>
打开swiper官方文档,查看初始化部分。
首先,初始化的时候要有一个字符串类型的选择器,这个对比上述实现发现没什么问题。然后下面说如果有多个swiper,要保留默认的类名swiper-container。到这里才想起来当前页面是单页面应用,其他很多地方也使用了swiper,但是刚才的html中为了避免冲突直接取了类名swiper-container_club,没有默认的类名swiper-container。默认的这个类名在swiper的css和js文件中有很多默认的样式和行为。
最后,在html中添加上默认的类名解决了问题。