使用vant的Overlay 遮罩层做弹框，遇到的bug

最新推荐文章于 2024-06-25 15:20:54 发布
最新推荐文章于 2024-06-25 15:20:54 发布
阅读量5.2k 收藏 8
点赞数 5
分类专栏： vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunbeibei00000/article/details/119679941
版权

*1、*遇到的需求是，在一个弹框内某个区域设定一个最大高度，超出部分实现上下滚动，
*2、*overlay遮罩层的lock-scroll属性默认设置为true
官方说明是：overlay锁定背景滚动，锁定时蒙层里的内容也将无法滚动
*3、*我是用overlay实现的弹框，然后需要滚动的区域，在 PC端调试可以用滚轮滚动，但是在真机上不能滑动
*4、*一开始我的解决办法是将lock-scroll的属性设置为false，
这样需要滚动的区域可以滚动了，但是底部背景也跟着滚动了，体验很差
*5、*最终解决办法是使用vant 的 popup
popup 也有lock-scroll 属性，默认为true，可以锁定底部背景。同时对蒙层内部的内容没有影响

罗倩楠_666
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
van overlay 遮罩层遇到页面滑动上移 //当fixed遇上transform，定位失效
weixin_45843723的博客
07-02 826
vant overlay 遮罩层遇到页面滑动遮罩层位置不对/fixed遇到transform失效
vant之解决action-sheet点击取消和遮罩层的bug
KID963931445的博客
07-09 7587
vant出现点击取消按钮出现了冒泡事件，点击遮罩层，面盘弹不回去。解决代码如下： vant官方文档提供了click-overlay事件来监听遮罩被点击的事件。 <van-action-sheet @click="stopPro($event)" @click-overlay="overlay" ></van-action-sheet> methods:{ stopPro(e){ e.stopPropraation(); //组织冒泡 e.preventDefaut
使用van-overlay，弹窗内容不可滚动
weixin_43606967的博客
10-26 282
弹窗内容很多，但是手机上不显示滚动条，不能滚动，找了半天，注意这个属性啊啊啊啊。
解决uniapp，textarea拉起页面被顶起和键盘被输入框遮挡的问题。
最新发布
qq_41851047的博客
06-25 710
1：Android、ios 同事2解决；2：我们在开发的时候会发现textarea或者input拉起键盘的时候整个页面被顶起了，header也被顶没了；官方给了:adjustPosition='false'属性，设置完之后页面就不会被顶起，但是键盘把输入框挡住了，就很恶心；3：我的实现思路是，adjustPosition='false'；用@keyboardheightchange监听键盘的高度；在textarea下面给一个view标签并且加高度；
Vant踩坑2——Overlay 遮罩层组件
weixin_47546788的博客
01-19 3359
问题：现有需求是一个页面，点击弹出一个遮罩层，并可以上下滚动，在chrome调试时，能上下滚动，但是在真机上不能滑动 解决方法： 将overlay遮罩层的lock-scroll属性默认设置为false。 官方说明是：overlay锁定背景滚动，锁定时蒙层里的内容也将无法滚动 <van-overlay :show="showDetail" :lock-scroll="false"> 来源参考：使用vant的Overlay 遮罩层做弹框，遇到的bug ...
关于移动端页面弹出框被软键盘遮挡的问题
Doris_sun的博客
04-10 3596
在移动端页面的开发中，当弹出框内有输入框需要用户输入时，往往会面临这样的一个问题：弹出的软键盘会将输入框遮挡住，不方便用户看到自己输入的内容。如下图输入地址一栏： 移动端中，当软键盘弹出时，会触发一个页面的resize事件，意思就是说，html的高度会发生改变，变成原来的高度和软键盘的高度相差值。由下图也可以看出，弹出框因内容自适应变得差不多要占完一整屏，而当
vantUI组件vant-overlay组件使用时移动端不能滑动问题全纪录
Dysons的专栏
07-06 6801
移动端前端项目开发中一直使用的是vantUI，在这次的项目中遇到了vant-overlay组件中的内容不能滑动，在PC端用鼠标不能拖动 只能滚轮滑动，开始以为是我的样式或者js出现了问题，检查下来并不存在问题，后台突发灵感想着不用这个组件试一下，果然是这个vant-overlay的问题，于是弃用了，自己写了个遮罩组件用起来，不知道有没有人遇到这个问题，欢迎告知除了我这个还有没有其他的解决办法，感谢~~~ 相关:vantUI, Vue ...
多种方式单击出现遮罩层代码
08-04
jQuery弹出层对话框代码基于jquery-3.3.1.min.js制作，有基础对话框、全屏对话框、可拖动对话框、暗黑模式对话框、设置宽度、隐藏按钮、设置按钮文字、按钮事件、自动关闭、嵌套iframe、内容背景色、隐藏遮罩层等...
Mpvue中使用Vant Weapp组件库的方法步骤
10-16
【标签】：Mpvue使用Vant Weapp，Mpvue使用Vant Weapp组件库 【正文】： Vant Weapp 是一个专门为微信小程序设计的组件库，具有丰富的UI组件和良好的性能。在Mpvue框架中使用Vant Weapp，可以提升小程序的界面设计...
在微信小程序中使用vant的方法
10-16
在开始使用 Vant 之前，你需要确保你的开发环境已经准备就绪，包括安装了微信开发者工具，并且版本足够新，以支持 npm 包的构建功能。这是使用 Vant 的前提条件。 首先，你需要在小程序项目的根目录下初始化 npm。...
vue 使用vant插件做tabs切换和无限加载功能的实现
01-18
之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; ...
微信小程序使用 vant Dialog组件的正确方式
10-15
Vant包含了近50个经过实际业务检验的组件，例如 Dialog 组件，它在微信小程序中的使用方法是本文的重点。 首先，Vant 的 Dialog 组件是一个弹窗对话框，它可以用于显示警告、确认或输入等操作。在微信小程序中使用 ...
loading遮不住dialog
weixin_43904427的博客
12-24 570
修改el-dialog的z-index，小于loading默认的2000。
VantUI中van-overlay组件内部溢出内容不可滑动
Wyatto137的博客
08-15 1164
解决van-overlay内部内容无法滑动问题
vue项目vant框架的滚动导航不生效原因
weixin_41791737的博客
05-11 6802
我引入vant组件使用滚动导航，不生效，其他导航都没问题； 经过排查发现是因为css样式问题；滚动导航的父盒子样式不能有overflow-y: auto;这个样式会导致滚动导航不生效 引入组件 import Vue from ‘vue’; import { Tab, Tabs } from ‘vant’; Vue.use(Tab); Vue.use(Tabs); 之后运行，导航可以点击但是页面不会跟着滚动，也不会吸顶直接就滚动隐藏了导航栏；如下图 经过一番排查原来是在APP.vue里的app容器样式里加了
vant避坑之---------overlay弹出层只可滚动不可滑动
niceday的博客
09-22 870
css 只可滚动不可滑动
让页面滚动固定位置：滚动事件不生效的情况（可用的三种方法）
weixin_58487208的博客
02-28 2139
需求是页面滚动到指定位置或指定元素（让该元素的顶端与视口顶部距离为0） 首先可以用window.scrollTo(x,y),不推荐。因为这个方法经常失效，且一般是滚动定值使用。 其次是document.documentElement.scrollTop = document.getElementById('el').clientHeight,不推荐。 最后是最能达到效果的document.getElementById('el').scrollIntoView({behavior: 'smooth'})
vant 自定义遮罩层van-overlay时局部滚动
YY_WYG的博客
07-08 1960
vant 自定义遮罩层van-overlay时局部滚动，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为，体验甚是不好 设置:lock-scroll="false"时，规则里面的滑块才会滚动，overflow-y才会生效---->这是个坑 上代码新建utils/modalHelper.js文件...
van-popup 全屏的解决方法
热门推荐
webfullstack的博客
02-12 1万+
在vant官网文档上看了好久也没有找到全屏的弹窗组件,没有解决,只能自己搞了,其实也很简单 代码部分 &lt;van-popup v-model="isShow" position="top" class="overlay80vh" :overlay="true"&gt; 内容 &lt;/van-popup&gt; CSS样式 .overlay80vh{ height
vantui中的Dialog使用overlay 隐藏遮罩层之后点击Dialog外面没有关闭？
05-20
如果您使用的是vue-cli创建的项目，可以在App.vue文件中添加以下代码，以便在点击遮罩层时关闭Dialog： ```html <template> <div id="app"> <router-view /> <van-dialog v-model="show" /> </div> </template> <script> export default { name: 'App', data() { return { show: false, }; }, mounted() { // 监听路由变化，关闭Dialog this.$router.beforeEach((to, from, next) => { this.show = false; next(); }); // 监听点击遮罩层事件，关闭Dialog this.$root.$on('van-overlay:click', () => { this.show = false; }); }, }; </script> ``` 以上代码中，我们监听了路由跳转事件和遮罩层点击事件，当事件触发时，将Dialog的`show`属性设置为`false`，即可关闭Dialog。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

罗倩楠_666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值