mintui弹窗滚动穿透的问题

使用场景:当弹窗出现的时候会发现底部的页面能滚动

解决方法:在mt-popup标签中加上@touchmove.native.stop.prevent  这个方法是阻止默认根元素的默认事件,native是关键,这个表示根元素的意思,也就是body或者html

  <mt-popup
            class="confirm_xcxlist"
            v-model="xcxlist"
            popup-transition="popup-fade"
            hight="50%"
            @touchmove.native.stop.prevent
        >

还有一种场景是弹窗也需要滚动,这个时候就不能用这个方法了,我们可以监听xcxlist值的变化来改变body节点touchMove事件

 //阻止滚动穿透
        xcxlist: function (val) {
            if(val) {
                document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
            } else {
                document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false });
            }
        }

  

posted @ 2021-10-15 14:06  小灬壊  阅读(145)  评论(0编辑  收藏  举报