解决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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
js实现照片墙功能实例
Feb 05 Javascript
cookie的secure属性详解
Apr 08 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
js实现密码强度检验
Jan 15 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 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(1) php开发环境配置
2010/02/15 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python如何转换字符串大小写
2020/06/04 Python
python3爬虫中异步协程的用法
2020/07/10 Python
大学生的应聘自我评价
2013/12/13 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
工厂搬迁方案
2014/05/11 职场文书
本科生自荐信
2014/06/18 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
音乐剧猫观后感
2015/06/04 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript