今天再开发项目的过程中使用了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中添加上默认的类名解决了问题。