解决 swiper插件 嵌入 iframe 不能滑动问题

Posted 冰vs焰

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决 swiper插件 嵌入 iframe 不能滑动问题相关的知识,希望对你有一定的参考价值。

iframe里是另一个网页,所以swiper检测不到内页的事件。

方法一:直接设置样式  pointer-events: none; 但iframe里面所有事件将不能点击包括 a链接

 

方法二:自己动手写内页事件检测,然后改变swiper,这个一定是在js的同源策略下才能进行。直接上代码...

var self = this;
            var isMove,pageX,poor,moveArr;
            var iframe = document.querySelector(‘#myiframe‘);
            var wrap = $(‘#shebao‘).closest(‘.swiper-wrapper‘);
            var num ;

            iframe.onload = function(){
                var doc = iframe.contentWindow.document;
                self.height = $(‘#shebao‘).parent().height();

                doc.addEventListener("touchstart",function(e){
                    isMove = true;
                    moveArr = [];
                    pageX = e.targetTouches[0].pageX;
                    moveArr.unshift(pageX);
                    //获取的transform值,matrix(1, 0, 0, 1, -1280, 0)
                    num = wrap.css(‘transform‘).split(‘,‘)[4]; 
                });
                doc.addEventListener("touchmove",function(e){
                    if(!isMove) return;
                    e.preventDefault();
                    
                    /*大概是iframe的原因,touch事件在移动的时候会产生两条不一样的数据,从而导致在滑动的时候产生抖动现象。
                      从而添加一个数组moveArr进行当前值和历史值进行对比,去掉多余数据
                    */
                    //当往左滑的时候,
                    if(pageX > e.targetTouches[0].pageX){
                        //历史值应该大于当前值,否则return
                        if(moveArr[0] < e.targetTouches[0].pageX){
                            return;
                        }
                    }
                    //当右滑的时候,
                    if(pageX < e.targetTouches[0].pageX){
                        //历史值应该小于当前值,否则return
                        if(moveArr[0] > e.targetTouches[0].pageX){
                            return;
                        }
                    }
                    //往数组头部插入数据
                    moveArr.unshift(e.targetTouches[0].pageX);
                    poor = pageX - e.targetTouches[0].pageX;
                    wrap.css(‘transform‘,‘translate3d(‘+(num-poor)+‘px,0px,0px)‘);
                })

                doc.addEventListener("touchend",function(e){
                    isMove = false;
                    poor = pageX - e.changedTouches[0].pageX;

                    //当移动超过设定值后进行swiper的上一页下一页操作
                    if(Math.abs(poor)>50){
                        if(poor < 0 ){
                            window.pages.slidePrev();
                        }else{
                            window.pages.slideNext();
                        }
                    }else{
                        //复原当前位置
                        wrap.css(‘transform‘,‘translate3d(‘+num+‘px,0px,0px)‘);
                    }
                    
                });
            }
        }

 

以上是关于解决 swiper插件 嵌入 iframe 不能滑动问题的主要内容,如果未能解决你的问题,请参考以下文章

滑动轮播的组件

解决safari中iframe嵌入不能滚动的问题

在vue里引用swiper插件,怎么使用

我再页面上使用swiper实现上下滑动,怎么滑动到一半的时候就回弹了,滑不到最后一个

jquery插件小集合

使用 swiper.js 库做出反应的 CSS 冲突