Vant Popup 弹出层组件穿透问题

最新推荐文章于 2024-08-31 15:22:23 发布

DJANDAB

最新推荐文章于 2024-08-31 15:22:23 发布

阅读量4.8k

点赞数 2

分类专栏： vant 微信小程序文章标签：前端 html html5

本文链接：https://blog.csdn.net/weixin_43339946/article/details/113338151

版权

vant 微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于 Vant Popup 弹出层组件在微信小程序上穿透的问题，

目前想到的方法是通过js控制最外层组件的样式来解决Popup 弹出层穿透的问题

逻辑思路利用 show 判断控制最外层组件的样式如 show 为 true style 就为 overflow:hidden;height:100vh; 为false 就为 ‘’

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DJANDAB

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决VantUI popup 弹窗不弹出或无蒙层的问题

01-18

背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=

Vue配合Vant使用时area省市区选择器的使用

我是我

01-07

6002

一、使用原因：在开发的过程中，所遇到的一个功能，我想用vant组件中的area地址选择器 在使用的过程中配合popup，默认popup不显示，当我点击触发时，从下方弹出popup组件在popup组件中可以将一开始配置的省市区进行选择将选择的数据传递给后端，这样的一个过程二、最终得到的效果图三、实现过程 3.1 HTML代码片 <div class="school-addre...

2 条评论您还未登录，请先登录后发表或查看评论

解决移动端使用Vant van-overlay 遮罩层导致的弹窗不可滚动问题

最新发布

Hi_alan的博客

08-31

1226

我们在进行H5调试的时候，尽量使用Nexus 4模式，如下图所示：因为之前一直习惯都是Responsive 和默认显示的那几种方式进行调试，也并没有发现问题，但是在这次的调试中发现这种浏览器样式显示正确的，但是手机端访问的时候还是会有些区别导致样式显示有问题。

uniapp uview 2.x 解决u-popup 滚动穿透

m0_50307759的博客

08-13

283

【代码】uniapp uview 2.x 解决u-popup 滚动穿透。

vant 滚动穿透问题

qq_38110067的博客

10-07

1327

vue vant 滚动穿透问题

微信小程序弹窗底部不滚动-穿透

qq_46199553的博客

10-26

1450

微信小程序穿透

2021-12-11 工作记录--Wechat applet-结合＜van-popup＞和＜van-picker＞实现年份、月份下拉选择弹窗+禁止滚动穿透

weixin_48850734的博客

12-11

2694

Wechat applet-结合＜van-popup＞和＜van-picker＞实现年份、月份下拉选择弹窗+禁止滚动穿透

vant的popup、Datetimepicker控件滚动穿透

weixin_41700532的博客

05-24

7247

今天一边改bug一边测试发现，vant的popup跟DatetimePicker会出现滚动穿透。解决办法：使用preventDefault阻止body的touchmove事件。方法1 方法2 在全局注册v-roll指令，结合timeDatePicker使用（如第二图）。bodyVisible初始状态为false，在弹层打开时改变，弹层点击确认跟取消时也需要改变！解决...

在vant中使用时间选择器和popup弹出层的操作

01-21

我就废话不多说了，大家还是直接看代码吧~ 选择日期 value=datetime click=showDatePicker> <van-popup v-model=showDatePicker position=bottom :style={ h

web弹出层组件MyPopup

02-14

MyPopup是一个JavaScript（js）弹出层、弹窗、对话框组件。MyPopup遵循javascript逻辑，容易理解，上手简单。MyPopup不仅模拟了alert、confirm、propmt等等控件，还扩展出tip（小提示框）、loading（加载中）、...

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

01-18

在移动端开发中使用到了Mint-ui组件库，其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题，官方文档最新版并没有解决这个问题。现象还原官方地址手机扫码查看demo，查看两个组件Popup组件和Datetime...

关于vant组件ActionSheet事件穿透的问题以及解决方案

weixin_40618068的博客

06-28

7250

关于vant的一些组件我真的不想吐槽了，例如动作面板actionSheet这个组件，在弹出层点击之后居然都是事件穿透…，我这里贴一个例子吧，这是我在公司负责的一个h5项目，点击评价时会显示动作面板，如下：(这是一个工单列表，点击红色框框内除了按钮位置都会跳转到工单详情页) 此时我点击评价，弹出actionSheet动作面板如果此时有需求是点击遮罩层隐藏动作面板，那么问题就来了，如果遮罩层后有点击事件，那么会发生事件穿透，在这个例子即是我点击遮罩层就直接进入到工单详情页了，这显然不合理。（更坑的是…点击

微信小程序页面滚动条穿透遮罩层解决方案

LRQQHM的博客

12-20

769

假设你在遮罩层中写了一个pop窗可以通过中断捕获阶段和取消冒泡阶段capture-catch控制手指触摸后移动 capture-catch:touchmove 例子 // 底部的内容盒子 <div> <div class="content" :capture-catch:touchmove="preventdefault"> <div @click="openPop">打开弹窗</div> </div> // 弹窗 <van-popup

Vant源码解析(四)----Popup弹出层，详解样式方法

热门推荐

我的博客

07-19

1万+

这个功能，自己也手写过，毕竟有很多弹窗的嘛。我自己写就是：一个背景层，然后一个盒子里面放内容。再写个显示隐藏事件。够够的了。

Vant UI中van-popup 不弹出问题的解决方案

飞扬小阁

01-04

5195

Vue 3需要将 v-model="show" 更改为 v-model:show= "show"

阻止冒泡/穿透-微信小程序(vant weapp)

m0_68428581的博客

07-25

1347

（1）问题：点击“立即报名”，先弹出一个dialog弹窗，取消就关闭弹窗，确认跳转另一页面，此时点击取消、确认按钮就开始跳转混乱（2）解决办法

vue中修改elementUI,vant 样式(样式穿透的三种方法)

m0_58565372的博客

05-26

1639

在vue项目中，当我们在使用第三方组件库（element-ui、vant）时，遇到需要修改组件中第三方组件库中的样式，但同时又不想去除scoped属性造成组件之间的样式覆盖，这个时候，就可以使用样式穿透来解决这个问题。 1，使用>>> <style scoped> >>>第三方组件类名 { 样式 } </style> 当Sass、Less之类的预处理器无法解析>>>，可以使用/deep/或者::v-deep 2./d

2022/04/13 小程序vant-popup覆盖原生组件input

Nighsloth的博客

04-13

1429

背景 popup弹窗下面有input，唤醒弹窗后，在弹窗操作，还能够点到input唤醒键盘输入文字效果如下原因原生组件的层级过高，vant-popup遮挡不了解决措施 1.在vant-popup上设置层级，无效 2.使用微信小程序组件 cover-view，样式失效参考之前在弹框中写的样式，失效，效果不对 3.设置状态，弹框弹起时，隐藏input，弹框关闭，显示input 参考思路 a. b. c. 解决方案：最开始用弹框modal的显隐值来控制效果，发现从下到上有过渡效果这种弹窗

vant-popup弹出层用法

10-20

Vant是一个基于Vue.js的移动端组件库，其中包含了Popup弹出层组件。使用Vant的Popup弹出层组件可以方便地实现弹出层的功能，具体用法如下： 1. 引入Vant组件库和样式文件。 2. 在需要使用弹出层的地方添加Popup组件，并设置相应的属性，如position、show、close-on-click-overlay等。 3. 在Popup组件中添加需要显示的内容。 4. 在Vue实例中添加相应的方法，用于控制弹出层的显示和隐藏。下面是一个简单的例子： ``` <template> <div> <van-button @click="showPopup">显示弹出层</van-button> <van-popup v-model="show" position="center" :close-on-click-overlay="false"> <div>这是弹出层的内容</div> <van-button @click="hidePopup">关闭弹出层</van-button> </van-popup> </div> </template> <script> import { VanPopup, VanButton } from 'vant'; export default { components: { VanPopup, VanButton, }, data() { return { show: false, }; }, methods: { showPopup() { this.show = true; }, hidePopup() { this.show = false; }, }, }; </script> ```