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)‘); } }); } }
时间: 2024-10-26 05:59:27