码迷,mamicode.com
首页 > 其他好文 > 详细

记录一次华为大屏操作,swiper中引入iframe滑动的问题处理

时间:2020-06-18 13:16:32      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:list   sel   func   页面   win   window   dev   处理   next   

简单实用,搬砖党专属,能力有限,一天的结晶,写完自己都笑了,真菜,哈哈哈哈

1.父页面监听,以下代码放入即可

function receiveMessageFromIframePage (event) {
                console.log(‘receiveMessageFromIframePage‘, event)
                if(event.data == "right-move"){
                    swiper.slidePrev();
                }else if(event.data == "left-move"){
                    swiper.slideNext();
                }
            }
            //监听message事件
            window.addEventListener("message", receiveMessageFromIframePage, false);

 

2. iframe子页面放入

setPostMessage()
function setPostMessage(){
        let _startX, _endX, _body = document.querySelector("#app"); 
        _body.addEventListener("touchstart", mousedown, false);
        _body.addEventListener("touchmove", mousemove, false);
        _body.addEventListener("touchend",mouseup , false);
        function mousedown(e) {_endX=_startX = e.clientX ? e.clientX : e.touches[0].clientX;}
        function mousemove(e) {_endX = e.clientX? e.clientX :  e.touches[0].clientX;}
        function mouseup(){
            if (!_startX&&!_endX) {return;}
            if (_endX - _startX > 100) {
                window.parent.postMessage("right-move", "*")
            } else if (_startX - _endX > 100) {
                window.parent.postMessage("left-move", "*")
            }
        }
      }

 

记录一次华为大屏操作,swiper中引入iframe滑动的问题处理

标签:list   sel   func   页面   win   window   dev   处理   next   

原文地址:https://www.cnblogs.com/zhenchaojia123/p/13156742.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!