最近使用vux的popup组件做个弹窗,在真机中使用发现存在滑动穿透的问题,即在弹出窗滑动内容,底层的内容也会跟着滑动,这种体验很不好。
废话不多说,直接上解决方法:
核心就是给根div添加固定定位。
具体实现如下:
<template> <div id='discounts' :class="{'fixed-touch':showDetail}"> <button @click="showDetail=true">弹出popup组件</button> // 遮罩层 <div class="overlayer" @touchmove.prevent v-show="showDetail" @click="showDetail=false"></div> // 这里注意下,要把popup组件的遮罩显示设置为false <popup v-model="showDetail" position="bottom" max-height="80%" should-rerender-on-show :show-mask="false"> <div class="popup-style">弹出框内容</div> </popup> </div> </template> <script> import { Popup } from 'vux' export default { data () { return { showDetail: false } }, components: { Popup } } </script> <style> .fixed-touch {position: fixed;} .overlayer{ position:fixed; left:0; top:0; 100%; height:100%; z-index: 500; background-color: #000; opacity: .5; } </style>
按照如上方式便可完美解决vux的popup组件在移动端滑动穿透的问题。
·
·
·
·
·
到此结束,有任何疑问或者其他解决方式,欢迎探讨。
QQ: 412606846 (微信同号)