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

问题描述：

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

赞 (0)

相关推荐

  • 浅谈vux之x-input使用以及源码解读

    前言 近期项目中使用的vux中的input,以及使用自定义校验规则和动态匹配错误提示,有时间记录下自己的使用经历和源码分析.希望大家多多指正,留言区发表自己宝贵的建议. 详解 列举官方文档中常用的几个属性的使用方法,代码如下 <group ref="group"> <x-input v-model="name" class="vux-input__name" title="名字" placeholder=&q

  • Vue2.0+Vux搭建一个完整的移动webApp项目的示例

    1.说明 运用技术:Vue2.0.Vux.vux-loader.vue-cli.vue-router.vuex 2.效果图 3.实现流程 3.1 搭建框架(需要安装好node.js.npm) 1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 npm install vue-cli -g // 如果还没安装 vuw-cli vue init airyland/vux2 projectName //注意,如

  • Vue中使用vux的配置详解

    Vue中使用vux的配置,分为两种情况: 一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目 二.想在已创建的Vue工程

  • vue中全局路由守卫中替代this操作(this.$store/this.$vux)

    全局路由守卫this.$vux.loading.hide()报错,访问不到this 解决办法 申明变量代替this main.js文件方法 router.beforeEach((to, from, next) => { if(vue){ vue.$vux.loading.hide() }else{ } next() }) let vue = new Vue({ el: '#app', router, store, components: { App }, template: '<App/>

  • Vux+Axios拦截器增加loading的问题及实现方法

    Vux+Axios拦截器增加loading的问题及实现方法

    很多时候,我们在页面使用Ajax刷新时候,会希望它出现loading的图标,让用户体验更好一些.那么如果我们每次在Axios里面进行请求,都要显示loading图标的话,那么没有一个全局的方法的话,势必会造成代码冗余的问题.有什么方法可以实现这个方法呢? 这里,我们就要用到Axios的请求拦截器与相应拦截器了 首先,我们在请求拦截器里面增加一个VUX的loading组件 axios.interceptors.request.use( config => { //请求拦截器,调用loading插件

  • vux-scroller实现移动端上拉加载功能过程解析

    vux-scroller实现移动端上拉加载功能过程解析

    本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库: vux(官方文档:https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面.基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在We

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

    问题描述: 在IOS设备上遮罩层显示在弹出内容的上面,导致弹出内容不能正常显示内容和响应点击事件 解决方案: 找到该Popup组件的祖先DOM节点是否被设置该CSS属性:-webkit-overflow-scrolling: touch; 若被设置将该CSS属性,则去掉即可. 补充知识:完美解决VUX的popup组件滑动穿透的问题 最近使用vux的popup组件做个弹窗,在真机中使用发现存在滑动穿透的问题,即在弹出窗滑动内容,底层的内容也会跟着滑动,这种体验很不好. 废话不多说,直接上解决方法:

  • 解决Element中el-date-picker组件不回填的情况

    1.问题描述 当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求,比如: 新建一个活动,需要定义活动的时间范围: 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交,新建完成: 网页上出现了新建好的活动,其他人想查看详细信息,打开页面,发现时间区间并没有实现回填! 2.问题分析 时间信息没有回填,首先要检查,后台数据返回情况以及页面上字段信息是否有差异等细节: 如果没有以上的情况,那就是我碰到的这种情况了, 后端数据返回没有差异,而且页面字段也没有错,其他

  • 解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题

    在移动端开发中使用到了Mint-ui组件库,其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题,官方文档最新版并没有解决这个问题. 现象还原 官方地址 手机扫码查看demo,查看两个组件Popup组件和Datetime的例子演示. 问题原因 HTML5触摸事件touchmove事件:当手指在屏幕上滑动的时候连续地触发 所以当激活出组件Popup组件和Datetime Picker的弹出层时,我们在弹层选择内容时上下连续滑动是会触发该事件 解决思路 在弹出层出现之后阻止

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • 解决vue中无法动态修改jqgrid组件 url地址的问题

    在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的url地址,修改如下: $("#accountGrid").setGridParam( //G,P要大写 { url:UrlService.url('www/1') } ) .trigger("reloadGrid"); 以上这篇解决vue中无法动态修改jqgrid组件 url地址的问题就是小编分享给大家的全部内

  • 解决vue 单文件组件中样式加载问题

    在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件,想法是美好的.以为这样加载进来的样式文件也只对当前组件有效:可现实是残酷的,这样加载进来的样式无法限制其作用域. <style scoped> @import "样式文件"; </style> 解决方案 采用 src属性加载样式. <style src=&q

  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组

  • vue中vant组件样式失效问题及解决

    目录 vant组件样式失效 通常有以下几种解决方法 修改vant组件样式 vant组件样式失效 vue项目中引入vant组件,若发现vant组件样式失效 通常有以下几种解决方法 方法一:引入全局样式   在引入vant组件的地方或者全局引入vant组件所有的样式,引入方法为:在vue引入vant的页面中,添加以下代码: import 'vant/lib/index.css' 这样可以引入vant全部样式,不过通常我们可以按需引入,如法二,局部引入部分样式即可. 方法二:局部引入样式   顾名思义

  • Vant中List组件immediate-check=false无效的解决

    目录 Vant中List组件immediate-check=false无效 问题场景 解决方法 Vant list组件使用的坑 总结 Vant中List组件immediate-check=false无效 使用vant中的List组件时,会有这样的场景 初始化时想自己触发列表查询,而不想触发 List 组件自带的 load 方法,这时可以设置 immediate-check=false,如下代码,但是这种方式会在下面的场景中出现问题 <van-list ref="vanlist"

  • 解决Android中自定义DialogFragment解决宽度和高度问题

    关于详解Android应用中DialogFragment的基本用法,大家可以参考下. 1. 概述 DialogFragment在android 3.0时被引入.是一种特殊的Fragment,用于在Activity的内容之上展示一个模态的对话框.典型的用于:展示警告框,输入框,确认框等等. 在DialogFragment产生之前,我们创建对话框:一般采用AlertDialog和Dialog.注:官方不推荐直接使用Dialog创建对话框. 2. 好处与用法 使用DialogFragment来管理对话

随机推荐