移动端swiper嵌iframe无法滑动的解决方案-白红宇

最近项目有个需求，要把详情页改成多个页面轮播，本来小事一桩，但页面上有多个谷歌的内容广告时，调用谷歌的异步代码，所有内容广告会重叠到第一个slide的广告区域，无奈改成iframe终于解决了，但是又引来了本次蛋疼的问题，slide无法滑动。

经过一番谷歌百度，无非两种办法抄来抄去

1、给iframe设置 CSS pointer-events: none，

2、在iframe内监听touch事件，根据手势调用swiper的方法滑动

这两种方法都存在问题

1、设置 pointer-events: none，iframe页面的事件都不会触发

2、监听iframe的touch事件判断手势，很麻烦，slide还不能随手指滑动，体验不好

难道就没有更好的解决办法了吗？

只要思想不滑坡，办法总比问题多

我们都知道，移动端touch事件是比click事件先触发的，顺着这个思路，我们可以给iframe设置 pointer-events: none，在touchStart里去掉，再在touchEnd里恢复，不就可以解决不能点击的问题了么？

const swiper = new Swiper(".swiper-container", {    on: {        touchStart(){            this.slides[this.activeIndex].querySelector("iframe").style.pointerEvents = "none";        },        touchEnd(){            // 由于touchEnd比click先触发，所以要等click执行完以后，再恢复pointer-events            setTimeout(()=>{                this.slides[this.activeIndex].querySelector("iframe").style.pointerEvents = "auto";            }, 1000);        }    }});复制代码

swiper 4.5.0 安卓移动端测试OK