swiper滑动时整个页面可以触发swipeleft事件的解决办法

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