解决vux 中popup 组件Mask 遮罩在最上层的问题


Posted in Javascript onNovember 03, 2020

问题描述:

在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 遮罩在最上层的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
个人小程序接入支付解决方案
May 23 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 #Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 #Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 #Javascript
使用vant的地域控件追加全部选项
Nov 03 #Javascript
vue vant中picker组件的使用
Nov 03 #Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 #Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 #Javascript
You might like
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python测试线程应用程序过程解析
2019/12/31 Python
Tensorflow 多线程设置方式
2020/02/06 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
python如何删除文件、目录
2020/06/23 Python
用Python 执行cmd命令
2020/12/18 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
学校募捐倡议书
2014/05/14 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
1000字打架检讨书
2014/11/03 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python