解决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 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
js中function()使用方法
Dec 24 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
python中reload(module)的用法示例详解
2017/09/15 Python
python实现决策树分类算法
2017/12/21 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
使用python实现kNN分类算法
2019/10/16 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python程序控制语句用法实例分析
2020/01/14 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
个人存款证明书
2014/10/18 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
讲解Python实例练习逆序输出字符串
2022/05/06 Python