查看: 1846|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2017-10-14 22:14
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    78

    主题

    380

    帖子

    3万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    31709
    发表于 2017-12-27 09:51:43 | 显示全部楼层 |阅读模式
    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 ;

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

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

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

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


    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2020-12-1 08:11 , Processed in 0.065987 second(s), 30 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表