• 解决 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)');
                        }
                        
                    });
                }
            }
  • 相关阅读:
    【k8s】deploy-progressDeadlineSeconds
    【k8s】deploy-paused
    【k8s】deploy-rollback
    【k8s】deploy-rollout
    【k8s】deploy-pod-template-hash
    【k8s】deploy-rs
    【k8s】deploy-metadata
    垂直居中总结
    linux操作系统的知识点复盘
    JMETER接口测试学习知识点复盘
  • 原文地址:https://www.cnblogs.com/lihui1030/p/6180274.html
Copyright © 2020-2023  润新知