get-container=“body“ 解决 vant Popup 弹出层 选项框随页面滚动分离问题

最新推荐文章于 2024-04-25 15:53:37 发布
最新推荐文章于 2024-04-25 15:53:37 发布
阅读量1w 收藏 4
点赞数 6
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： web app vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pxhing/article/details/105795031
本文介绍如何使用get-container=body属性解决van-popup组件在页面滚动时出现的分离问题，通过设置此属性，使弹出层高度固定，避免随页面滚动而错位。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言：
上篇文章写到了 vant Popup 弹出层 + Picker 选择器 实现选择列表，van-popup 里面加了一个get-container="body"属性，页面有两个van-popup，页面就会出现弹出层 选项框随页面滚动分离，get-container="body"属性就解决了这个问题

没加属性之前的效果：
在这里插入图片描述
第一个van-popup

在这里插入图片描述
第二个van-popup

在这里插入图片描述
加上属性之前的效果：
在这里插入图片描述
第一个van-popup
在这里插入图片描述
第二个van-popup

在这里插入图片描述

当设置了get-container="body"属性之后，van-popup的高度就会根据当前页面窗口的高度固定，从而解决页面滚动分离问题
Popup 弹出层 + Picker 选择器 实现选择列表请看下篇文章，链接: https://blog.youkuaiyun.com/pxhing/article/details/105793133.

Vue 移动端 实战八 文章评论 评论列表组件、点赞、发布评论、评论回复等、Vue依赖注入方法、解决列表重复数据问题和不重新获取数据问题
m0_55170432的博客
06-25 3696
1.0 展示文章评论列表 1.1 准备组件 为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。 1、创建 src/views/article/components/article-comment.vue <template> <div class="article-comments"> <!-- 评论列表 --> <van-list v-model="loading" :finished="finishe
我的课程表（技术栈：Vue+node+vant+mysql）
weixin_43964148的博客
10-06 2790
1.首页： 可惜不能放视频 只能贴图为敬 先看一波首页 如图 所示，首页为课程通知页面，提醒今日和明日上什么课。 先贴上代码： <template> <div class="index"> <!--头部采用vant组件--> <van-nav-bar title="课程通知...
getContainer
sss12554的专栏
05-11 2995
public static WTContainer getContainer(String containerName) {         int[] index = { 0 };         try {             QuerySpec qs = new QuerySpec(WTContainer.class);             SearchCondition s...
vant van-dropdown-item 鼠标滚动背景也滚动bug修复\get-container无效
weixin_45271385的博客
11-18 1887
项目中遇到下拉会随背景滚动的问题 然后使用get-container绑定父元素没有用 因为看样式他的position依旧为fixed,最大号的就是绑定#app/body了 <van-dropdown-menu > <van-dropdown-item get-container="#app" v-model="repairService" :options="option1"
ant design vue 的getPopupContainer
呆呆狗
10-28 4852
的样式，做修改，如果 style 标签上开启了 scoped，肯定不会生效。在 ant design vue 中，有几个组件是有。默认是渲染到body 上的，所以如果你想要对。属性的，比如：下拉菜单。
【前端疑难杂症bug——vant-popup避坑】
爪爪爪爪哇的博客
01-19 1642
当在vant-popup中再嵌套一个popup。子popup的高度会受限于父popup。会导致子的元素出现遮挡，即个别元素无法正常展示。
[Vant] van-tabs标签页吸顶\/粘性布局在移动端适配上的一些尝试
wangmj518的专栏
09-13 7215
此外要放弃vant-tabs预设的内容区默认插槽（就是说不要在van-tab那个双标签里写标签页内容，默认插槽在页面上的元素类名是.van-tabs__content），在.header元素的同级手写一个内容区div进行每个标签页的展示，通过v-show="active==='a/b/c/d'"进行切换。
van-popup弹起后顶上去了输入框
04-24
好的，我现在需要解决用户提到的van-popup弹出时输入框被顶起的问题。用户使用的是Vant组件库，在van-popup中嵌套了van-field，首次点击输入框时键盘遮挡了输入框，失去焦点再次点击才能顶起弹窗。用户希望找到解决...
微信小程序ios vant显示层级
03-15
### 微信小程序 iOS Vant 组件 z-index 显示层级问题解决方案 在微信小程序开发过程中，当使用 Vant WeApp 组件库时，在 iOS 设备上可能会遇到一些特定的显示问题，比如 `z-index` 层级错乱的情况。这种现象通常...
前端vue2如何实现强制查看协议
最新发布
06-27
常见的实现方式是在用户登录或进入主界面之前，弹出一个模态框（对话框）显示协议内容，用户需要滚动阅读协议，然后勾选“已阅读并同意”之类的复选框，最后点击确认按钮。如果用户未阅读或未同意，则无法继续使用...
vant弹窗放在子组件显示 不上下居中问题
qq_38935512的博客
11-18 1446
问题分析 ：放在子组件中fixed 混乱，查窗口高端，定位尽然时根据父组件的高度去定位的。 解决方案： 1.将弹出窗口放在父组件中 以插槽slot的方式引入
vue引用vant组件库，一个页面同时绑定多个popup弹框
yaya07755的专栏
12-29 3782
<div class="item mt30"> <div class="name">配送方式</div> <div class="right"> <strong>邮寄</strong> <van-icon name="ellipsis" @click="showPopup"/>...
van-popup弹出层在ios被遮挡问题
cczz66的博客
12-03 7467
适配 ios 遇坑，van-popup 弹出层中组件内容被覆盖，而且键盘弹起时 header 被顶出屏幕，通过调整样式层级可以解决部分覆盖问题，但是 header 被顶出屏幕一直没解决； 后来仔细翻看文档，发现官方预留了 get-container 属性，可以把弹出层挂载到指定元素上，设置get-container="body"，把组件挂载到最外层boby上问题解决。 ...
vant弹出层popup无法挂载到指定节点
qq_43222063的博客
04-25 2053
在使用vant的popup组件时，希望其只显示在某个div中，否则连标题栏也遮盖住了，使用vant自带的属性，发现并不生效。通过控制台可以看出，popup已经挂载上去了，但popup的样式为position:fixed，这显然不合理，此时，popup内容的位置已经正常，但遮罩层位置还不对，用下组件自带的方法，完整代码如下。解决办法，只能自己修改样式了。页面也没有达到期望的效果。
解决van-popup导致页面无法滑动问题
weixin_54009353的博客
03-17 5176
在vue2中，van-popup组件有一个默认锁定背景滚动 但当背景内容不止一页时就很麻烦，所以这时需要给van-popup标签添加 :lock-srcoll="false" <van-popup v-model="showPopup" :lock-scroll="false"> <img class="popup-close" @click="showPopup = false" src="../assets/images/X.png" /> </van
微信小程序 - vant popup弹出层阻止底层页面滑动
热门推荐
idomyway的博客
08-30 1万+
前言     在小程序编写过程中使用使用vant weapp的popup组件做小程序的弹出层，触屏导致底层页面跟着滑动。 解决方法     使用touch事件阻止属性，@touchmove.stop.prevent指向空事件 van-popup( :show="popupShow" :z-index="999" ...
nuxt+vant用来van-popup移动端滚动失效
weixin_45148145的博客
03-09 774
问题描述：移动端官网跳转路由后的页面，页面无法滚动
van-popup滑动卡顿并且在有时候在ios上经常性滑动卡顿的情况
m0_60067558的博客
11-17 1146
然后苹果手机卡顿情况是pop里层的设置的z-index大于了pop本身的默认z-idenx2008，设置成一样的就可以了。:lock-scroll="false"加了这个属性就可以了具体去看官网。
Vant2组件库van-list+Toast下拉加载滚动条回顶问题
Mr.小灰狼_随笔
01-08 3885
Vant2组件库van-list+Toast下拉加载滚动条回顶问题 目录 List 列表 Toast 轻提示 解决方案 1、不使用Toast 的 加载提示 2、修改调整pointer-event 属性值 3、判断是否为第一次加载再使用 4、forbidClick 设置为 false 5、自定义组件
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、付费专栏及课程。

余额充值