解决 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)‘);
                    }

                });
            }
        }
时间: 2024-10-26 05:59:27

解决 swiper插件 嵌入 iframe 不能滑动问题的相关文章

解决 Swiper 插件autoHeight问题 建议

var mySwiper=$(".swiper-container").swiper({ autoHeight: true, onSlideChangeStart: function() { var H = $(".swiper-slide").eq(mySwiper.activeIndex).find(".bigbox").height(); var scH=$(".swiper-container").height();

做微信公众号时,移动端滑动效果(swiper插件(display:none))显示滑动问题

微信公众号的制作,其中缺少不了希望实现标题.内容.图片的滑动效果, 这时候可以选择使用(swiper插件)实现相应效果,功能十分强大,链接:http://www.swiper.com.cn/: 最近做一款公众号时,在实现功能时遇到一难点,废了九牛二虎之力,终于在一高人的帮助下解决了. 1.问题描述: 原本该滑动项是隐藏的(display:none;),滑动项的代码是参考swiper插件文档内容而写, 通过按钮点击之后该滑动项显示(dispay:block),再进行左右滑动效果时,始终显示swip

移动端网站的内容触摸滑动-Swiper插件

手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一个js插件. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端,以及PC端网站. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 使用详情,参见Swiper中

解决几个vue中是swiper插件遇到的bug

1.在使用swiper插件的时候,如果内容都是静态资源的话不会出现错误,但是动态的话会出现划不动,或者白屏 分析:这种bug是怎样出现的,一般都是初始化的位置不对 方法: swiperInit() { var mySwiper = new Swiper('.swiper-container', { pagination : '.swiper', paginationType : 'bullets', autoplay : 200, }) } //这个是swiper的初始化方法,如果你是在crea

【Javascript 基础】嵌入另一张HTML文档、通过插件嵌入内容

1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="叶超Luka" /> <meta name=&quo

vue tab嵌入iframe切换不刷新,相对完整的方案

说到Vue的简单.便捷.高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项卡控件: 本章先说选项卡tab控件的嵌入iframe. 本次主要解决以下问题: 1.tab控件混合vue-component-view与iframe-view; 2.切换tab, iframe-view 保持原界面不刷新,与keep-alive效果等同; 3.关闭tab中的iframe-view后,将重新打开,不作cache; 问题1: 将 <router-view></router-v

如何解决Wordpress插件冲突的问题

之前有一篇文章介绍了如何判断依附插件是否被启用的问题(例如,在作为WooCommerce扩展的插件中,就要判断当前网站的Woocommerce是否启用了),文章链接:http://suoling.net/is_woocommerce_activated/现在开始说正事儿:首先,我们要引入一个Wordpress核心文件:    /*  避免 current_user_can 不可用的问题 */    if ( !function_exists( 'wp_get_current_user' ) )

在angular中使用swiper插件轮播无效的原因

我在angular中使用swiper插件时总会出现轮播不运行. 做项目么,肯定会使用路由实现切换的效果,我在做项目时总喜欢先把内容渲染在主页面上,当所要实现的效果都实现时,然后再把数据拿出来放在子页面上,通俗的讲就是把他放在另一个页面上,通过路由去获取信息. 1.在用路由中实现时一定要在路由里加上控制器controller 1 app.config(function ($routeProvider) { 2 $routeProvider.when('/index', { 3 templateUr

模板文件中的插件嵌入点列表

模板文件中的插件钩子(插件嵌入点): 插件钩子代码例子: <!--{hook/xxx_xxx}--> 插件钩子的作用在于能让插件在指定的一些位置输出有关代码!在DZ7.x-DX1.5中插件钩子并不显得很重要,但是随着插件应用的不断普及,插件创作者的不断加入,插件钩子在模板中的地位尤其显得格外重要,如果缺少了程序必须的插件钩子,可能会造成自带系统插件功能受到影响!所以我们在制作模板的时候一定要参考默认模板中的插件钩子位置进行合理的安排!除非你觉得某个插件钩子在自己的模板中并不需要,否则请保留插件