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 }); } }