完美解决VUX的popup组件滑动穿透的问题

　　最近使用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;
    width:100%;
    height:100%;
    z-index: 500;
    background-color: #000;
    opacity: .5;
 }
</style>　

　　按照如上方式便可完美解决vux的popup组件在移动端滑动穿透的问题。

　　·

　　·

　　·

　　·

　　·

　　到此结束，有任何疑问或者其他解决方式，欢迎探讨。

　　QQ: 412606846 (微信同号)

　　

转载于:https://www.cnblogs.com/zlfProgrammer/p/9673398.html