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

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

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", "*")
            }
        }
      }
原文地址:https://www.cnblogs.com/zhenchaojia123/p/13156742.html