Vant Popup 弹出层组件穿透问题

最新推荐文章于 2024-04-10 11:18:31 发布
最新推荐文章于 2024-04-10 11:18:31 发布
阅读量4.6k 收藏
点赞数 2
分类专栏： vant  微信小程序 文章标签： 前端 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43339946/article/details/113338151
版权

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

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

 

 

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

 

<view style="{{show? 'height:100vh;overflow: hidden;' : ''}}" class="page"></view>

 

DJANDAB
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
web弹出层组件MyPopup
02-14
版本 0.1.23 麦草CMS（MyCMS），简约而不简单。 MyPopup，做的很少。MyPopup就像alert、confirm、propmt等控件一样仅仅弹出一个对话框，其他的交给回调函数yes和no甚至你绑定的事件处理函数，由你随意支配。MyPopup，做的很多。大多数情况下，你不用去管MyPopup弹出的位置、宽度、高度等等，MyPopup都会智能做出判断、渲染。 MyPopup是一个JavaScript（js）弹出层、弹窗、对话框组件。MyPopup遵循javascript逻辑，容易理解，上手简单。MyPopup不仅模拟了alert、confirm、propmt等等控件，还扩展出tip（小提示框）、loading（加载中）、iframe（框架）、open（常规弹窗）、blank（空白弹出层）等等常用的弹出层。让我最满意的是tip()方法，它依附于目标弹出一个小提示框。tip()方法会根据目标元素智能渲染小提示框的位置和弹出方向。依据MyPopup的tip()方法可以轻松扩展出下拉菜单组件。小提示框有zhi（带直角尾巴）、zhi1（带边框的直角尾巴）、jian（带尖角尾巴）、noTail（不带尾巴）四种样式，调用方法是MyCMS.popup.tip("麦草CMS问候您",{tipStyle: "zhi"})。
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=
解决uni-popup禁止滚动穿透
最新发布
Girasoles的博客
04-10 689
当滚动弹窗的时候，也会滚动弹窗下的页面，设置了page-meta无效，用下面这种方法解决了。clear写一个空方法即可。
vant 滚动穿透问题
qq_38110067的博客
10-07 1202
vue vant 滚动穿透问题
关于vant组件ActionSheet事件穿透的问题以及解决方案
weixin_40618068的博客
06-28 6993
关于vant的一些组件我真的不想吐槽了，例如动作面板actionSheet这个组件，在弹出层点击之后居然都是事件穿透…，我这里贴一个例子吧，这是我在公司负责的一个h5项目，点击评价时会显示动作面板，如下：(这是一个工单列表，点击红色框框内除了按钮位置都会跳转到工单详情页) 此时我点击评价，弹出actionSheet动作面板 如果此时有需求是点击遮罩层隐藏动作面板，那么问题就来了，如果遮罩层后有点击事件，那么会发生事件穿透，在这个例子即是我点击遮罩层就直接进入到工单详情页了，这显然不合理。（更坑的是…点击
2021-12-11 工作记录--Wechat applet-结合＜van-popup＞和＜van-picker＞ 实现年份、月份下拉选择弹窗+禁止滚动穿透
weixin_48850734的博客
12-11 2595
Wechat applet-结合＜van-popup＞和＜van-picker＞ 实现年份、月份下拉选择弹窗+禁止滚动穿透
微信小程序弹窗底部不滚动-穿透
qq_46199553的博客
10-26 1389
微信小程序穿透
在vant中使用时间选择器和popup弹出层的操作
01-21
我就废话不多说了，大家还是直接看代码吧~ 选择日期 value=datetime click=showDatePicker> <van-popup v-model=showDatePicker position=bottom :style={ h
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
01-18
在移动端开发中使用到了Mint-ui组件库，其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题，官方文档最新版并没有解决这个问题。 现象还原 官方地址 手机扫码查看demo，查看两个组件Popup组件和Datetime...
微信小程序弹出层，右上角关闭按钮
07-14
在微信小程序开发中，弹出层（Popup）是一种常见的用户交互元素，用于提供临时性的信息展示、用户操作或对话框。微信小程序的弹出层设计通常包括一个可点击的按钮来触发弹出，以及在弹出层右上角设置一个关闭按钮，...
微信小程序页面滚动条穿透遮罩层解决方案
LRQQHM的博客
12-20 725
假设你在遮罩层中写了一个pop窗 可以通过中断捕获阶段和取消冒泡阶段capture-catch控制手指触摸后移动 capture-catch:touchmove 例子 // 底部的内容盒子 <div> <div class="content" :capture-catch:touchmove="preventdefault"> <div @click="openPop">打开弹窗</div> </div> // 弹窗 <van-popup
Vant UI中van-popup 不弹出问题的解决方案
飞扬小阁
01-04 4872
Vue 3需要将 v-model="show" 更改为 v-model:show= "show"
阻止冒泡/穿透-微信小程序(vant weapp)
m0_68428581的博客
07-25 1061
（1）问题：点击“立即报名”，先弹出一个dialog弹窗，取消就关闭弹窗，确认跳转另一页面，此时点击取消、确认按钮就开始跳转混乱（2）解决办法
vant的popup、Datetimepicker控件滚动穿透
weixin_41700532的博客
05-24 7134
今天一边改bug一边测试发现，vant的popup跟DatetimePicker会出现滚动穿透。 解决办法：使用preventDefault阻止body的touchmove事件。 方法1 方法2 在全局注册v-roll指令，结合timeDatePicker使用（如第二图）。bodyVisible初始状态为false，在弹层打开时改变，弹层点击确认跟取消时也需要改变！ 解决...
vue中修改elementUI,vant 样式(样式穿透的三种方法)
m0_58565372的博客
05-26 1520
在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 1359
背景 popup弹窗下面有input，唤醒弹窗后，在弹窗操作，还能够点到input唤醒键盘输入文字 效果如下 原因 原生组件的层级过高，vant-popup遮挡不了 解决措施 1.在vant-popup上设置层级，无效 2.使用微信小程序组件 cover-view，样式失效 参考 之前在弹框中写的样式，失效，效果不对 3.设置状态，弹框弹起时，隐藏input，弹框关闭，显示input 参考思路 a. b. c. 解决方案： 最开始用弹框modal的显隐值来控制效果，发现从下到上有过渡效果这种弹窗
Vant源码解析(四)----Popup弹出层，详解样式方法
我的博客
07-19 8234
这个功能，自己也手写过，毕竟有很多弹窗的嘛。我自己写就是：一个背景层，然后一个盒子里面放内容。再写个显示隐藏事件。够够的了。
van-cascader组件的封装
weixin_42356155的博客
08-27 2061
<template> <van-popup v-model="isShow" v-bind="popupOption"> <van-cascader v-model="pickerOption.cascaderValue" v-bind="pickerOption" @close="handleCancel" @finish="handleFinish" @change="handleChange"
使用样式穿透，强制覆盖Vant原样式
a519525531的博客
12-11 4446
使用Vant组件的时候，我们会发现在某些场合组件的原样式不符合我们的需求，这个时候我们就需要重写组件的原样式。 这个是组件的原样式： 因为.w-all >>> .van-field__control{text-align: right;} 在浏览器可以看到： text-align：left那一栏已经被一条横线划掉，取而代之的是： 而这个，就是因为使用了样式穿透强制覆盖了原样式，从而实现我们需要的样式效果。 ...
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> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值