问题描述:

在IOS设备上遮罩层显示在弹出内容的上面,导致弹出内容不能正常显示内容和响应点击事件

解决方案:

找到该Popup组件的祖先DOM节点是否被设置该CSS属性:-webkit-overflow-scrolling: touch;

若被设置将该CSS属性,则去掉即可。

补充知识:完美解决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组件在移动端滑动穿透的问题。

以上这篇解决vux 中popup 组件Mask 遮罩在最上层的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
vux,popup组件,Mask遮罩

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com