Swiper中文论坛

标题: 解决 swiper插件 嵌入 iframe 不能滑动问题 [打印本页]
作者: admin    时间: 2017-12-27 09:51
标题: 解决 swiper插件 嵌入 iframe 不能滑动问题
iframe里是另一个网页，所以swiper检测不到内页的事件。
方法一：直接设置样式  pointer-events: none; 但iframe里面所有事件将不能点击包括 a链接

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

  1. var self = this;
  2.             var isMove,pageX,poor,moveArr;
  3.             var iframe = document.querySelector('#myiframe');
  4.             var wrap = $('#shebao').closest('.swiper-wrapper');
  5.             var num ;

  7.             iframe.onload = function(){
  8.                 var doc = iframe.contentWindow.document;
  9.                 self.height = $('#shebao').parent().height();

  11.                 doc.addEventListener("touchstart",function(e){
  12.                     isMove = true;
  13.                     moveArr = [];
  14.                     pageX = e.targetTouches[0].pageX;
  15.                     moveArr.unshift(pageX);
  16.                     //获取的transform值，matrix(1, 0, 0, 1, -1280, 0)
  17.                     num = wrap.css('transform').split(',')[4];
  18.                 });
  19.                 doc.addEventListener("touchmove",function(e){
  20.                     if(!isMove) return;
  21.                     e.preventDefault();
  22.                     
  23.                     /*大概是iframe的原因，touch事件在移动的时候会产生两条不一样的数据，从而导致在滑动的时候产生抖动现象。
  24.                       从而添加一个数组moveArr进行当前值和历史值进行对比,去掉多余数据
  25.                     */
  26.                     //当往左滑的时候，
  27.                     if(pageX > e.targetTouches[0].pageX){
  28.                         //历史值应该大于当前值，否则return
  29.                         if(moveArr[0] < e.targetTouches[0].pageX){
  30.                             return;
  31.                         }
  32.                     }
  33.                     //当右滑的时候，
  34.                     if(pageX < e.targetTouches[0].pageX){
  35.                         //历史值应该小于当前值，否则return
  36.                         if(moveArr[0] > e.targetTouches[0].pageX){
  37.                             return;
  38.                         }
  39.                     }
  40.                     //往数组头部插入数据
  41.                     moveArr.unshift(e.targetTouches[0].pageX);
  42.                     poor = pageX - e.targetTouches[0].pageX;
  43.                     wrap.css('transform','translate3d('+(num-poor)+'px,0px,0px)');
  44.                 })

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

  50.                     //当移动超过设定值后进行swiper的上一页下一页操作
  51.                     if(Math.abs(poor)>50){
  52.                         if(poor < 0 ){
  53.                             window.pages.slidePrev();
  54.                         }else{
  55.                             window.pages.slideNext();
  56.                         }
  57.                     }else{
  58.                         //复原当前位置
  59.                         wrap.css('transform','translate3d('+num+'px,0px,0px)');
  60.                     }
  61.                     
  62.                 });
  63.             }
  64.         }
复制代码






欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2