首页 > 其他 > 详细

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

时间:2020-06-18 12:34:48      阅读:67      评论:0      收藏:0      [点我收藏+]

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

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滑动的问题处理

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!